How to Use JQuery Datatable

N Vinodh
8y
2.9k
0
0
25
Blog

jQuery DataTable is easy to search, Paging, sorting on HTML table.

Now am going to create a HTML Page with some data using HTML Table.

HTML Code:

<html>
<head>
<title>Using Jquery Datatabble</title>
<head>
<body>
<table id="datatable">
<thead>
<tr>
<th> Username </th>
<th> Password </th>
<th> Created by </th>
</tr>
</thead>
<tbody>
<tr>
<td> Vinodh </td>
<td> jquery@123 </td>
<td> Admin </td>
</tr>
<tr>
<td> Santhakumar </td>
<td> jquery@123 </td>
<td> Guest </td>
</tr>
</tbody>
</table>
</body>
</html>

Run in browser

Output look like this:

Output

Now am going to add a Jquery references for datatable:

Download all this references and include it into your html page.

Add this simple script to call the jquery datatable.

<script type="text/javascript">
$(document).ready(function () {
$('#datatable').dataTable({ /Get the ID of the table
});
});
</script>

Full Code:

<html>
<head>
<title>Using Jquery Datatable</title>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<script type="text/javascript">
$(document).ready(function ()
{
$('#datatable').dataTable(
{});
});
</script>
</script>
</head>
<body>
<table id="datatable">
<thead>
<tr>
<th> Username </th>
<th> Password </th>
<th> Created by </th>
</tr>
</thead>
<tbody>
<tr>
<td> Vinodh </td>
<td> jquery@123 </td>
<td> Admin </td>
</tr>
<tr>
<td> Santhakumar </td>
<td> jquery@123 </td>
<td> Guest </td>
</tr>
</tbody>
</table>
</body>
</html>