11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/
Friday, October 28, 2016

Create Pagination,Sorting,Filter with HTML Table using DataTable.js

Introduction 
In this blog we will learn about "How to use DataTable.js to create a grid with pagination,sorting,filter etc..using Jquery.". Most of developer creating a simple html table and write huge amount of code to make a grid with sorting,paging,etc..features .
Using Jquery DataTable.js you don't need to write huge amount of code,just you need to write simple 3-4 line of code. 
You can find more information about DataTable.js from this link ,click here
DataTable.js can be use with Asp.net,Java,MVC,PHP,etc.. 
Features of DataTable.js
There are many features and advantage of Datatable.js .you can use anywhere using simple jquery. 
 If you are using DataTable.js you can apply these features which are given below.
  • Inline Sorting.
  • Sorting on each column.
  • Pagination.
  • Filter.
  • Filter on each column.
  • Global Search.
  • Stylist Look .
  • Dynamic column binding.
  • Bind Json data.
  • Language Independent.
Basic requirment to use DataTable.js
If you want to use DataTable.js ,then firstly you have to use these Library which are given below.otherwise it will through error.
CSS 
Jquery 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
DataTable.Js 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
How to use DataTable.js 
If you have added all library ,Create a HTML Table Like this.see code below.
  1. <table id="MyTable" class="display" cellspacing="0" width="100%">  
  2.         <thead>  
  3.             <tr>  
  4.                 <th>First Name</th>  
  5.                 <th>Last Name</th>  
  6.                 <th>Postion</th>  
  7.                 <th>Technologies</th>  
  8.                 <th>Company Name</th>  
  9.                 <th>Experience</th>  
  10.             </tr>  
  11.         </thead>  
  12.         <tfoot>  
  13.             <tr>  
  14.                 <th>Name</th>  
  15.                  
  16.             </tr>  
  17.         </tfoot>  
  18.         <tbody>  
  19.             <tr>  
  20.                 <td>Bikesh</td>  
  21.                 <td>Srivastava</td>  
  22.                 <td>Software Engg.</td>  
  23.                 <td>Asp.net</td>  
  24.                 <td>Hytech</td>  
  25.                 <td>4</td>  
  26.             </tr>  
  27.             <tr>  
  28.                 <td>Navdeep</td>  
  29.                 <td>Kumar</td>  
  30.                 <td>Sr.Software Engg.</td>  
  31.                 <td>Asp.net</td>  
  32.                 <td>Hytech</td>  
  33.                 <td>8</td>  
  34.             </tr>  
  35.             <tr>  
  36.                 <td>Sujata</td>  
  37.                 <td>Sinha</td>  
  38.                 <td>Software Engg.</td>  
  39.                 <td>Asp.net</td>  
  40.                 <td>Hytech</td>  
  41.                 <td>2</td>  
  42.             </tr>  
  43.             <tr>  
  44.                 <td>Panakj</td>  
  45.                 <td>Bhanadari</td>  
  46.                 <td>Software Engg.</td>  
  47.                 <td>Asp.net</td>  
  48.                 <td>Hytech</td>  
  49.                 <td>3</td>  
  50.             </tr>  
  51.             <tr>  
  52.                 <td>Harikant</td>  
  53.                 <td>Kumar</td>  
  54.                 <td>Web Designer</td>  
  55.                 <td>Asp.net</td>  
  56.                 <td>Hytech</td>  
  57.                 <td>4</td>  
  58.             </tr>  
  59.             <tr>  
  60.                 <td>Payal</td>  
  61.                 <td>Agrawal</td>  
  62.                 <td>Software Engg.</td>  
  63.                 <td>Salesforce</td>  
  64.                 <td>Hytech</td>  
  65.                 <td>1</td>  
  66.             </tr>  
  67.             <tr>  
  68.                 <td>Pritam</td>  
  69.                 <td>Shekhawat</td>  
  70.                 <td>Manager</td>  
  71.                 <td>Salesforce</td>  
  72.                 <td>Hytech</td>  
  73.                 <td>3</td>  
  74.             </tr>  
  75.             <tr>  
  76.                 <td>Saurabh</td>  
  77.                 <td>Kumar</td>  
  78.                 <td>Software Engg.</td>  
  79.                 <td>Asp.net</td>  
  80.                 <td>HytechPro</td>  
  81.                 <td>6</td>  
  82.             </tr>  
  83.             <tr>  
  84.                 <td>Vinod</td>  
  85.                 <td>Kumar</td>  
  86.                 <td>Software Engg.</td>  
  87.                 <td>Asp.net</td>  
  88.                 <td>HytechPro</td>  
  89.                 <td>6</td>  
  90.             </tr>  
  91.             <tr>  
  92.                 <<td>Manik</td>  
  93.                 <td>Bansal</td>  
  94.                 <td>Software Engg.</td>  
  95.                 <td>SharePoint</td>  
  96.                 <td>HytechPro</td>  
  97.                 <td>3</td>  
  98.             </tr>  
  99.             <tr>  
  100.                 <td>Brijesh</td>  
  101.                 <td>Srivastava</td>  
  102.                 <td>Asst.Manager</td>  
  103.                 <td>Pharma</td>  
  104.                 <td>Sun Pharama</td>  
  105.                 <td>6</td>  
  106.             </tr>  
  107.             <tr>  
  108.                 <td>Krishu</td>  
  109.                 <td>Srivastava</td>  
  110.                 <td>Software Engg.</td>  
  111.                 <td>Asp.net</td>  
  112.                 <td>Hytech</td>  
  113.                 <td>4</td>  
  114.             </tr>              
  115.         </tbody>  
  116.     </table>  
 After that create a js code like this ,see code.
  1. $(document).ready(function() {  
  2.     $('#MyTable').DataTable( {  
  3.         initComplete: function () {  
  4.             this.api().columns().every( function () {  
  5.                 var column = this;  
  6.                 var select = $('<select><option value=""></option></select>')  
  7.                     .appendTo( $(column.footer()).empty() )  
  8.                     .on( 'change', function () {  
  9.                         var val = $.fn.dataTable.util.escapeRegex(  
  10.                             $(this).val()  
  11.                         );  
  12.                 //to select and search from grid  
  13.                         column  
  14.                             .search( val ? '^'+val+'$' : '', true, false )  
  15.                             .draw();  
  16.                     } );  
  17.    
  18.                 column.data().unique().sort().each( function ( d, j ) {  
  19.                     select.append( '<option value="'+d+'">'+d+'</option>' )  
  20.                 } );  
  21.             } );  
  22.         }  
  23.     } );  
  24. } );  
Now you are ready to run application ,I hope you have done all setting and code fine.You can see output like this.see image.
 Now you can see and use all features of DataTable.js .
I hope you understand all thing ,if you can see complete code below.

  1. <html>  
  2. <head>  
  3. <link rel="Stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />  
  4. <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>  
  5. <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
  6. <script>  
  7. $(document).ready(function() {  
  8.     $('#MyTable').DataTable( {  
  9.         initComplete: function () {  
  10.             this.api().columns().every( function () {  
  11.                 var column = this;  
  12.                 var select = $('<select><option value=""></option></select>')  
  13.                     .appendTo( $(column.footer()).empty() )  
  14.                     .on( 'change', function () {  
  15.                         var val = $.fn.dataTable.util.escapeRegex(  
  16.                             $(this).val()  
  17.                         );  
  18.                 //to select and search from grid  
  19.                         column  
  20.                             .search( val ? '^'+val+'$' : '', true, false )  
  21.                             .draw();  
  22.                     } );  
  23.    
  24.                 column.data().unique().sort().each( function ( d, j ) {  
  25.                     select.append( '<option value="'+d+'">'+d+'</option>' )  
  26.                 } );  
  27.             } );  
  28.         }  
  29.     } );  
  30. } );  
  31. </script>  
  32. </head>  
  33. <body>  
  34. <table id="MyTable" class="display" cellspacing="0" width="100%">  
  35.         <thead>  
  36.             <tr>  
  37.                 <th>First Name</th>  
  38.                 <th>Last Name</th>  
  39.                 <th>Postion</th>  
  40.                 <th>Technologies</th>  
  41.                 <th>Company Name</th>  
  42.                 <th>Experience</th>  
  43.             </tr>  
  44.         </thead>  
  45.         <tfoot>  
  46.             <tr>  
  47.                 <th>Name</th>  
  48.                  
  49.             </tr>  
  50.         </tfoot>  
  51.         <tbody>  
  52.             <tr>  
  53.                 <td>Bikesh</td>  
  54.                 <td>Srivastava</td>  
  55.                 <td>Software Engg.</td>  
  56.                 <td>Asp.net</td>  
  57.                 <td>Hytech</td>  
  58.                 <td>4</td>  
  59.             </tr>  
  60.             <tr>  
  61.                 <td>Navdeep</td>  
  62.                 <td>Kumar</td>  
  63.                 <td>Sr.Software Engg.</td>  
  64.                 <td>Asp.net</td>  
  65.                 <td>Hytech</td>  
  66.                 <td>8</td>  
  67.             </tr>  
  68.             <tr>  
  69.                 <td>Sujata</td>  
  70.                 <td>Sinha</td>  
  71.                 <td>Software Engg.</td>  
  72.                 <td>Asp.net</td>  
  73.                 <td>Hytech</td>  
  74.                 <td>2</td>  
  75.             </tr>  
  76.             <tr>  
  77.                 <td>Panakj</td>  
  78.                 <td>Bhanadari</td>  
  79.                 <td>Software Engg.</td>  
  80.                 <td>Asp.net</td>  
  81.                 <td>Hytech</td>  
  82.                 <td>3</td>  
  83.             </tr>  
  84.             <tr>  
  85.                 <td>Harikant</td>  
  86.                 <td>Kumar</td>  
  87.                 <td>Web Designer</td>  
  88.                 <td>Asp.net</td>  
  89.                 <td>Hytech</td>  
  90.                 <td>4</td>  
  91.             </tr>  
  92.             <tr>  
  93.                 <td>Payal</td>  
  94.                 <td>Agrawal</td>  
  95.                 <td>Software Engg.</td>  
  96.                 <td>Salesforce</td>  
  97.                 <td>Hytech</td>  
  98.                 <td>1</td>  
  99.             </tr>  
  100.             <tr>  
  101.                 <td>Pritam</td>  
  102.                 <td>Shekhawat</td>  
  103.                 <td>Manager</td>  
  104.                 <td>Salesforce</td>  
  105.                 <td>Hytech</td>  
  106.                 <td>3</td>  
  107.             </tr>  
  108.             <tr>  
  109.                 <td>Saurabh</td>  
  110.                 <td>Kumar</td>  
  111.                 <td>Software Engg.</td>  
  112.                 <td>Asp.net</td>  
  113.                 <td>HytechPro</td>  
  114.                 <td>6</td>  
  115.             </tr>  
  116.             <tr>  
  117.                 <td>Vinod</td>  
  118.                 <td>Kumar</td>  
  119.                 <td>Software Engg.</td>  
  120.                 <td>Asp.net</td>  
  121.                 <td>HytechPro</td>  
  122.                 <td>6</td>  
  123.             </tr>  
  124.             <tr>  
  125.                 <<td>Manik</td>  
  126.                 <td>Bansal</td>  
  127.                 <td>Software Engg.</td>  
  128.                 <td>SharePoint</td>  
  129.                 <td>HytechPro</td>  
  130.                 <td>3</td>  
  131.             </tr>  
  132.             <tr>  
  133.                 <td>Brijesh</td>  
  134.                 <td>Srivastava</td>  
  135.                 <td>Asst.Manager</td>  
  136.                 <td>Pharma</td>  
  137.                 <td>Sun Pharama</td>  
  138.                 <td>6</td>  
  139.             </tr>  
  140.             <tr>  
  141.                 <td>Krishu</td>  
  142.                 <td>Srivastava</td>  
  143.                 <td>Software Engg.</td>  
  144.                 <td>Asp.net</td>  
  145.                 <td>Hytech</td>  
  146.                 <td>4</td>  
  147.             </tr>              
  148.         </tbody>  
  149.     </table>  
  150. </body>  
  151. </html>  
Bikesh Srivastava JQUERY

Life Is Complicated, But Now programmer Can Keep It Simple.