Плагин jQuery DataTables: серверный фильтр для ввода и выбора в определенных столбцах

Question

С плагином jQuery DataTables у меня есть сортировка для серверной части.

Моя проблема сейчас заключается в том, как отфильтровать несколько определенных столбцов на стороне сервера.Некоторые столбцы я хочу фильтровать с помощью <input>, а некоторые столбцы я хочу фильтровать с помощью <select>.

В документации есть отдельные примеры фильтрации ввода, а затем выберите фильтрацию, где она проходит по всем столбцам, но не их комбинации.
Я видел этот вопрос, но он нене помогло Фильтрация отдельных столбцов на стороне сервера DataTables

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