Who doesn’t like formatted HTML tables, especially when the table is large and you wish there was an easy way to format, enhance and search the data within. Well, look no further than DataTables. DataTables is a jQuery plugin that will essentially enable you to do just that.
Test Drive the table below:
$(document).ready(function() { $('#example').dataTable();});You can disable features that you don’t wish to use.
$(document).ready(function() { $('#example').dataTable( {"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false } );
} );
The page controls which are used by default in DataTables (forward and backward buttons only) are great for most situations, but there are cases where you may wish to customize the controls presented to the end user. This is made simple by DataTables through its extensible pagination mechanism. There are two types of pagination controls built into DataTables: two_button (default) and full_numbers. To switch between these two types, use the sPaginationType initialization parameter.
$(document).ready(function() {$('#example').dataTable({"sPaginationType": "full_numbers"});
});
You can create custom search/filter for each of the columns in the table:
var asInitVals = new Array();
$(document).ready(function() {var oTable = $('#example').dataTable( {
"oLanguage": {"sSearch": "Search all columns:"
}
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
/* * Support functions to provide a little bit of 'user friendlyness' to the textboxes in * the footer */$("tfoot input").each( function (i) {
asInitVals[i] = this.value;} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
These are just a few features that I have personally worked with. There is a lot more you can do with the jQuery DataTable plugin. Checkout the full range of demos here
