- SPLessons

jQuery DataTable js for PHP Asp Net Java

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery DataTable js for PHP Asp Net Java

jQuery DataTable js for PHP Asp Net Java 


 
Datatable.js is a opensource project. Using with datatable.js you can simply get beautiful Pagination, instant search and multi-column ordering and it is much more faster that any other.

Description :

I have table called ’emplyoee’, in this table assume that there are 2000 records. So we cant show the all records in one page. If you go for paging better use datatable.js is very simple to include in your web page. Follow the below steps to get the grid with paging using of datatable.js

Step1 :

 
 <link rel="stylesheet" href="bootstrap.min.css" type="text/css" media="all">
<style type="text/css">
         .dataTables_length {
         float:left;
         }
         .dataTables_filter {
         float:right;
         }
         .dataTables_info {
         float: left;
         }
         .dataTables_paginate {
         float:right;
         }
         .dataTables_paginate a {
         border: solid 1px #ccc;
         margin-left: 1px;
         padding: 2.5%;
         cursor:pointer;
         }
      </style>

 <script src="jquery-1.9.1.js" type="text/javascript"></script>    
 <script src="jquery.dataTables.js" type="text/javascript"></script>    
<script type="text/javascript" >
         $(document).ready(function() {
           $('#datatable').dataTable( {
               "iDisplayLength": 4, // give count to show how many records to in one page
          "sPaginationType": "full_numbers"
           });
         } );
      </script> 

Step2 :

Add below code in HTML body 


<table class="table" id="datatable">
    <thead>
       <th>S.No.</th>
       <th>Column1</th>
       <th>Column2</th>
       <th>Column3</th>
       <th>Column4</th>      		
</thead>

<tbody>

<tr>
<td>1</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>2</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>3</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>4</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>5</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>6</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>7</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>8</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>9</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<td>10</td>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>


</tbody>
</table>

Thats it. Now you got the table grid with beautiful pagination ‘Jquery.datatable.js’
jQuery DataTable js for PHP Asp Net Java we can use the databale.js in any programming langues.