Datatables as data grid for PHP sourced tabular data

DataTables is a plug-in for the jQueryJavascript library. We used this highly flexible tool for creating data grid in HTML. Just like any jQuery plugins available, you initialize it like below.

var oTable; 
$(document).ready(function() { 
 oTable = $('#example').dataTable( { 
 "bSortClasses": false, 
 "bProcessing": true, 
 "bServerSide": true, 
 "bLengthChange": true, 
 "bSort": false, 
 "bFilter": true, 
 "bStateSave": true, 
 "sAjaxSource": "property_processing.php", 
 "sPaginationType": "full_numbers", 
 "sDom": '', "aoColumns": [ 
 { "sClass": "topshow" }, 
 { "sClass": "topshow" }, 
 { "sClass": "topshow" }, 
 { "bVisible": false } ], 
 "aaSorting": [[, 'asc']], 
 "fnServerData": function ( sSource, aoData, fnCallback ) { 
 /* Add some extra data to the sender */ 
 aoData.push( 
 { "name": "city_id", "value": "4564" }, 
 { "name": "sortby", "value": "" } 
 ); 
 $.getJSON( sSource, aoData, function (json) { 
 /* Do whatever additional processing you want on the callback, then tell DataTables */ 
 fnCallback(json); } 
 ); 
 } 
 } ); 
} ); 

You can look for the list of properties and possible values as the parameter to initilizing variable. Request variables can be sent to the server and ajax source will listen and return the data based upon the request variables. The HTML table with the same id is displayed below to display the content.

 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example1" width="100%"> 
 <thead> 
 <tr> 
 <th>&nbsp;</th>
 <th>Property Id</th> 
 <th>Code</th> 
 <th>Registered</th> 
 <th>Address</th> 
 <th>Suburb</th> 
 <th>Estate</th> 
 <th>Type</th> 
 <th>Bdm</th> 
 <th>Bth</th> 
 <th>Car</th> 
 <th>Land(m<sup>2</sup>)</th> 
 <th>Rent Unfurnished</th> 
 <th>Rent Furnished</th> 
 <th>NRAS</th> 
 <th>SMSF</th> 
 <th>Land$</th> 
 <th>Build$</th> 
 <th>Total$</th> 
 <th>Date listed</th> 
 <th>Status</th> 
 <th>PDF 1</th> 
 <th>PDF 2</th> 
 <th>PDF 3</th> 
 <th>PDF 4</th> 
 <th>Cashflow</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td colspan="18" class="dataTables_empty">Loading data from server</td> </tr>
 </tbody>
</table> 

The plugin rocks. Happy coding!!! Check out http://www.datatables.net/ for more.