Post
Ask Question

Using JQuery DataTable

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>  
  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>  
  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>  
  49.   
  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>  
  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.   
  11.         <script type="text/javascript">  
  12.             $(document).ready(function() {  
  13.                 $('#datatable').dataTable({});  
  14.             });  
  15.         </script>  
  16.   
  17.         </script>  
  18.   
  19.   
  20.     </head>  
  21.   
  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>  
  63.   
  64. </html>  
Now finally the output looks like this.

I will search for “Vinodh”.

output

You can see the result above. 


Similar Articles