jQuery table

-

 <!DOCTYPE html> 

<html> 


<head> 


<meta content="initial-scale=1, 

maximum-scale=1, user-scalable=0" 

name="viewport" /> 


<meta name="viewport"

content="width=device-width" /> 


<!--Datatable plugin CSS file -->

<link rel="stylesheet" href= 

"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" /> 


<!--jQuery library file -->

<script type="text/javascript"

src="https://code.jquery.com/jquery-3.5.1.js"> 

</script> 


<!--Datatable plugin JS library file -->

<script type="text/javascript"

src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> 

</script> 

</head> 


<body> 

<h2> 

Multiple tables operations 

using jQuery Datatables 

</h2> 


<!--HTML tables with student data-->

<table id="" class="display" style="width:100%"> 

<thead> 

<tr> 

<th>StudentID</th> 

<th>StudentName</th> 

<th>Age</th> 

<th>Gender</th> 

<th>Marks Scored</th> 

</tr> 

</thead> 


<tbody> 

<tr> 

<td>ST1</td> 

<td>Prema</td> 

<td>35</td> 

<td>Female</td> 

<td>320</td> 

</tr> 

<tr> 

<td>ST2</td> 

<td>Wincy</td> 

<td>36</td> 

<td>Female</td> 

<td>170</td> 

</tr> 

<tr> 

<td>ST3</td> 

<td>Ashmita</td> 

<td>41</td> 

<td>Female</td> 

<td>860</td> 

</tr> 

<tr> 

<td>ST4</td> 

<td>Kelina</td> 

<td>32</td> 

<td>Female</td> 

<td>433</td> 

</tr> 

<tr> 

<td>ST5</td> 

<td>Satvik</td> 

<td>41</td> 

<td>male</td> 

<td>162</td> 

</tr> 

<tr> 

<td>ST6</td> 

<td>William</td> 

<td>37</td> 

<td>Female</td> 

<td>372</td> 

</tr> 

<tr> 

<td>ST7</td> 

<td>Chandan</td> 

<td>31</td> 

<td>male</td> 

<td>375</td> 

</tr> 

<tr> 

<td>ST8</td> 

<td>David</td> 

<td>45</td> 

<td>male</td> 

<td>327</td> 

</tr> 

<tr> 

<td>ST9</td> 

<td>Harry</td> 

<td>29</td> 

<td>male</td> 

<td>205</td> 

</tr> 

<tr> 

<td>ST10</td> 

<td>Frost</td> 

<td>29</td> 

<td>male</td> 

<td>300</td> 

</tr> 

<tr> 

<td>ST11</td> 

<td>Ginny</td> 

<td>31</td> 

<td>male</td> 

<td>560</td> 

</tr> 

<tr> 

<td>ST12</td> 

<td>Flod</td> 

<td>45</td> 

<td>Female</td> 

<td>342</td> 

</tr> 

<tr> 

<td>ST13</td> 

<td>Marshy</td> 

<td>23</td> 

<td>Female</td> 

<td>470</td> 

</tr> 

<tr> 

<td>ST13</td> 

<td>Kennedy</td> 

<td>43</td> 

<td>male</td> 

<td>313</td> 

</tr> 

<tr> 

<td>ST14</td> 

<td>Fiza</td> 

<td>31</td> 

<td>Female</td> 

<td>750</td> 

</tr> 

<tr> 

<td>ST15</td> 

<td>Silva</td> 

<td>34</td> 

<td>male</td> 

<td>985</td> 

</tr> 

</tbody> 

</table> 

<br /> 


<script> 

/* Initialization of datatables */ 

$(document).ready(function () { 

$('table.display').DataTable(); 

}); 

</script> 

</body> 


</html> 


Popular posts from this blog

MCSL 216 MCA NEW Practical ~ common questions suggestions

-
Topic: JS VALIDATION   Q1. Design a form for booking room through a Hotel website. The form should have relevant fields (make suitable assumptions). Further, the form should have Submit and Reset button. Now, perform following: Marks: 20   Solution: <html>     <title>hotel form booking</title>     <body>         <br>         <h2>Hotel Form</h2>         <br>           <form id="booking_form">             <label for="p_name">Person Name</label> <br>             <input type="text" id="p_name" name="p_name">          ...
Read more

dev chaeatsheet

-
Image
dev cheatsheet link: https://docs.google.com/document/d/15gRGAB57iEFs_TGsqrk08_OZ36mX1yfsMKCYM6qX7gk/edit?usp=sharing Topic: WordPress Theme Dev We can develop our custom theme in wordpress. Let’s first understand the folder structure of wordpress.contact form Let me assure you, how can you make a proper structure of a wordpress project.  front-page.php: This template is used to display the front page of the site. It's often used for the site's homepage. index.php: This is the fallback template used when more specific templates are not available. It usually displays a list of posts. style.css: This file contains the styles for your theme. While it can include theme author details in comments, its primary purpose is to style the HTML elements of your theme. single.php: This template is used to display a single post's details.             404.php: handle 404 error page         ...
Read more

STRAPI

-
Image
  Strapi helps us to provide pre-made cms backend. In strapi everything is about content type.   Topic: Weird Things About STRAPI Topic: Document Save States When we want to store a post into strapi, that time it gives us 2 options: “publish”, “save”. When we create content as publish/save it creates 2 different records. First 2 are for “save” and the rest 2 are for “publish”. Good thing is when creating a new publish/save it delta the OLD one ID and create a NEW one. Topic: Content Type change in strapi We can add multiple fields into strapi content type. For changing the Column Type we need go in inside /src/your-content-type/schema.json /* OLD ONE */ "attributes": {     "title": {       "type": "string"     },     "description": {       "type": "text",   "length": 80     }, /* NEW ONE */ "description": {    ...
Read more