jQuery DataTables plugin: server-side filter for input and select in specific columns
With the jQuery DataTables plugin, I've got the sorting down for server-side.
My problem now is how to filter a few specific columns server-side. Some columns I want to be filtered via <input>
, and some columns I want to filter via <select>
.
The documentation has separate examples of input filtering and then select filtering w开发者_如何学Gohere it loops through all columns, but not a combination thereof.
I've seen this question, but it hasn't helped. DataTables Server Side Individual Column FilteringI had same issue so i worked out to be like below,
var tableColumns = [
{ "data": "adcampaignName", "name": "Adcampaign Name","search" : true},
{ "data": "advertiser.name", "name": "Advertiser Name","search" : true },
{ "data": "offerName", "name": "Offer Name","search" : true },
{ "data": "dailyBudget", "name": "Daily Budget","search" : false},
{ "data": "startingOn", "name": "Starting On","search" : false },
{ "data": "endingOn", "name": "Ending On","search" : false },
{ "data": "status", "name": 'Status',"search" : true,"dropdown" : true }
];
In places like columns of datatables have used the tablecolumns variable.
Additionally used the same to add/not to add on select/textfield filter i used conditions like
if(tableColumns[index].search && !tableColumns[index].dropdown){
see below, In initComplete,
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"columns": tableColumns,
"ajax": $.fn.dataTable.pipeline( {
url: '/test.json',
pages: 5, // number of pages to cache
"type": "POST"
} ),
initComplete: function () {
this.api().columns().every( function (index) {
var column = this;
if(tableColumns[index].search && tableColumns[index].dropdown){
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
//column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="active">Active</option>' )
select.append( '<option value="inactive">InActive</option>' )
//} );
}
} );
}
} );
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function (index) {
if(tableColumns[index].search && !tableColumns[index].dropdown){
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
}
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function (index) {
var that = this;
if(tableColumns[index].search && !tableColumns[index].dropdown){
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
}
} );
I think that Column Filtering add-on for DataTables is what you need. See http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html
精彩评论