Post
Ask Question

How to Use JQuery Datatable

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>  
  2.   
  3. <head>  
  4.     <title>Using Jquery Datatabble</title>  
  5.   
  6.     <head>  
  7.   
  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>  
  31.   
  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>  
  2.   
  3. <head>  
  4.     <title>Using Jquery Datatable</title>  
  5.   
  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>  
  19.   
  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>  
  43.   
  44. </html>  
Now finally output look a like this:

finally output

Now am going to search for “Vinodh”.

search