jQuery DataTables 插件：用于在特定列中输入和选择的服务器端过滤器

Question

使用 jQuery DataTables 插件，我可以对服务器端进行排序。

我现在的问题是如何在服务器端过滤一些特定的列。有些列我想通过<input> 过滤，有些列我想通过<select> 过滤。

文档有单独的输入过滤示例，然后选择过滤，它循环遍历 所有 列，但不是它们的组合。
我见过这个问题，但它没有帮助。 DataTables Server Side Individual Column Filtering

Answer 1

我有同样的问题，所以我想像下面这样，

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  }
            ];

在像数据表列这样的地方使用了 tablecolumns 变量。

另外使用相同的添加/不添加选择/文本字段过滤器我使用了类似的条件

if(tableColumns[index].search && !tableColumns[index].dropdown){

见下文，在 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();
	 	            }
	 	        } );
 	       	}
 	    } );

Answer 2

我认为 DataTables 的列过滤插件是您所需要的。见http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html