开发者

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 Filtering


I 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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜