Jquery dataTables columnFilter插件不工作

我是dataTable的新手。当我添加filter columns插件时，不会调用sAjaxSource。一切正常。如果我禁用.columnFilter{，它仍然可以工作。 这是我的代码：

jQuery('#table1').dataTable({
                "aoColumns":            
                    [
                     { "mDataProp": "icon", "bSortable": false },
                     { "mDataProp": "name" , "bSortable": false},
                     { "mDataProp": "description" , "bSortable": false},
                     { "mDataProp": "charging" , "bSortable": false},
                     { "mDataProp": "download" , "bSortable": false},
                     { "mDataProp": "action" , "bSortable": false}
                 ],
                "bProcessing" : true,
                "bServerSide" : true, 
                "sPaginationType": "full_numbers",
                "bPaginate": true,
                "sAjaxSource" : "application-ajax.html?action=FILTER", 
                "sServerMethod" : "POST",
                "oLanguage" : {
                    "sSearch" : "Filter Apps:",
                    "sLengthMenu" : 'Display <select>'+
                        '<option value="10">10</option>'+
                        '<option value="25">25</option>'+
                        '<option value="50">50</option>'+
                        '<option value="100">100</option>'+
                        '<option value="-1">All</option>'+
                        '</select> records'
                }
}).columnFilter({
                  sPlaceHolder: "head:before",
                  "aoColumns": [
                                 null,
                                 null,
                                 null,
                                 null,
                                 null,
                                 {
                                     type: "select",
                                     values: [ 'ON', 'OFF']
                                 }
                              ]

              });    

---

您可能正在使用columnFilter插件[。我会确保您已成功加载该插件

要在不使用插件的情况下手动按列筛选，您可以在页面中按照以下示例进行操作：

API参考文档包含每个API方法的示例， 以及它的功能、返回内容和 它将接受哪些参数；但让我们形成所描述的概念 上面详细介绍了DataTables API是如何 可以使用。在本例中，我们在页脚中创建一个select元素 表中每列的单元格，其中包含来自该列的数据 列和将用于搜索表

var table = $('#example').DataTable();  
table.columns().flatten().each( function ( colIdx ) {
  // Create the select list and search operation
  var select = $('<select />')
    .appendTo(
        table.column(colIdx).footer()
    )
    .on( 'change', function () {
        table
            .column( colIdx )
            .search( $(this).val() )
            .draw();
    } );

// Get the search data for the first column and add to the select list
table
    .column( colIdx )
    .cache( 'search' )
    .sort()
    .unique()
    .each( function ( d ) {
        select.append( $('<option value="'+d+'">'+d+'</option>') );
    } ); } );

第1行-获取DataTables API的实例，其上下文中只有一个表

第3行-使用columnsDT方法选择表中的所有列。FlattDT用于将columnsDT的2D数组返回减少为列索引的1D数组，而实用程序方法eachDT用于对每个选定列执行操作

第5行-创建列过滤器的select元素

第7行-使用column.footerDT方法获取要插入select输入的页脚单元格元素

第9行-使用jQuery on方法在select元素的值更改时执行操作-在本例中，搜索表

var table = $('#example').DataTable();  
table.columns().flatten().each( function ( colIdx ) {
  // Create the select list and search operation
  var select = $('<select />')
    .appendTo(
        table.column(colIdx).footer()
    )
    .on( 'change', function () {
        table
            .column( colIdx )
            .search( $(this).val() )
            .draw();
    } );

// Get the search data for the first column and add to the select list
table
    .column( colIdx )
    .cache( 'search' )
    .sort()
    .unique()
    .each( function ( d ) {
        select.append( $('<option value="'+d+'">'+d+'</option>') );
    } ); } );

第10-13行-使用column.searchDT对搜索进行排队，并将drawDT链接到结果以更新表的显示

第17-19行-从列中获取数据，DataTables使用column.cacheDT方法搜索表

第20-21行-实用程序方法sortDT和uniqueDT用于将数据减少到一个有序的列表中，以便呈现给最终用户

第22-24行-我们的选择列表中添加了一个搜索词选项，可供使用

如您所见，DataTables API非常灵活，并提供 用于访问和操作表的各种选项。 请参阅API参考文档以获取完整的 方法。此外，编辑器等插件可以 使用自定义方法（如row.edit和 cell.edit以及其他选项