0

jQuery DataTablesプラグインを使用すると、サーバー側の並べ替えができます。

私の問題は、サーバー側でいくつかの特定の列をフィルタリングする方法です。でフィルタリングしたい列と、でフィルタリングしたい<input>列があります<select>。

ドキュメントには、入力フィルタリングの個別の例があり、すべての列をループするフィルタリングを選択しますが、それらの組み合わせはありません。
私はこの質問を見ましたが、それは役に立ちませんでした。 DataTablesサーバー側の個別の列のフィルタリング

4

2 に答える 2

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();
	 	            }
	 	        } );
 	       	}
 	    } );

于 2016-07-19T12:41:55.613 に答える
0

DataTables の Column Filtering アドオンが必要だと思います。http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.htmlを参照してください

于 2011-05-16T18:59:19.387 に答える