JQuery DataTable is easy to search with paging, sorting on HTML table.

Now I am going to create an 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>
  13. Username
  14. </th>
  15. <th>
  16. Password
  17. </th>
  18. <th>
  19. Created by
  20. </th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <td>
  26. Vinodh
  27. </td>
  28. <td>
  29. jquery@123
  30. </td>
  31. <td>
  32. Admin
  33. </td>
  34. </tr>
  35. <tr>
  36. <td>
  37. Santhakumar
  38. </td>
  39. <td>
  40. jquery@123
  41. </td>
  42. <td>
  43. Guest
  44. </td>
  45. </tr>
  46. </tbody>
  47. </table>
  48. </body>
  50. </html>
Run in browser.

Output look like the following,

output
Now I will add a JQuery references for DataTtable:

Download all these 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. {
  4. $('#datatable').dataTable
  5. ({
  6. /Get the ID of the table
  7. });
  8. });
  9. </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" />
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13. $('#datatable').dataTable({});
  14. });
  15. </script>
  17. </script>
  20. </head>
  22. <body>
  23. <table id="datatable">
  24. <thead>
  25. <tr>
  26. <th>
  27. Username
  28. </th>
  29. <th>
  30. Password
  31. </th>
  32. <th>
  33. Created by
  34. </th>
  35. </tr>
  36. </thead>
  37. <tbody>
  38. <tr>
  39. <td>
  40. Vinodh
  41. </td>
  42. <td>
  43. jquery@123
  44. </td>
  45. <td>
  46. Admin
  47. </td>
  48. </tr>
  49. <tr>
  50. <td>
  51. Santhakumar
  52. </td>
  53. <td>
  54. jquery@123
  55. </td>
  56. <td>
  57. Guest
  58. </td>
  59. </tr>
  60. </tbody>
  61. </table>
  62. </body>
  64. </html>
Now finally the output looks like this.

I will search for “Vinodh”.

output

You can see the result above.