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:

  1. <html>
  3. <head>
  4. <title>Using Jquery Datatabble</title>
  6. <head>
  8. <body>
  9. <table id="datatable">
  10. <thead>
  11. <tr>
  12. <th> Username </th>
  13. <th> Password </th>
  14. <th> Created by </th>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <tr>
  19. <td> Vinodh </td>
  20. <td> jquery@123 </td>
  21. <td> Admin </td>
  22. </tr>
  23. <tr>
  24. <td> Santhakumar </td>
  25. <td> jquery@123 </td>
  26. <td> Guest </td>
  27. </tr>
  28. </tbody>
  29. </table>
  30. </body>
  32. </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.

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $('#datatable').dataTable({ /Get the ID of the table
  4. });
  5. });
  6. </script>
Full Code:
  1. <html>
  3. <head>
  4. <title>Using Jquery Datatable</title>
  6. <head>
  7. <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
  8. <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script>
  9. <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
  10. <script type="text/javascript">
  11. $(document).ready(function ()
  12. {
  13. $('#datatable').dataTable(
  14. {});
  15. });
  16. </script>
  17. </script>
  18. </head>
  20. <body>
  21. <table id="datatable">
  22. <thead>
  23. <tr>
  24. <th> Username </th>
  25. <th> Password </th>
  26. <th> Created by </th>
  27. </tr>
  28. </thead>
  29. <tbody>
  30. <tr>
  31. <td> Vinodh </td>
  32. <td> jquery@123 </td>
  33. <td> Admin </td>
  34. </tr>
  35. <tr>
  36. <td> Santhakumar </td>
  37. <td> jquery@123 </td>
  38. <td> Guest </td>
  39. </tr>
  40. </tbody>
  41. </table>
  42. </body>
  44. </html>
Now finally output look a like this:

finally output

Now am going to search for “Vinodh”.

search