Question

我是dataTable的新手。当我添加过滤器列插件时，不会调用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']
                                 }
                              ]

              });

Answer 1

看来你可能正在使用“columnFilter”插件[https://code.google.com/p/jquery-datatables-column-filter/]。我会确保你成功加载插件。

要在没有插件的情况下手动过滤列，您可以在https://www.datatables.net/manual/api页面中按照此示例操作：

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行 - 使用columns（）DT方法选择表中的所有列。 flatten（）DT用于将列（）DT的2D数组返回减少为列索引的1D数组，实用方法each（）DT用于对每个选定列执行操作。

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

第7行 - 使用column（）。footer（）DT方法获取要插入选择输入的页脚单元格。

第9行 - 当select元素的值发生变化时，使用jQuery on（）方法执行操作 - 在这种情况下搜索表。

第10 - 13行 - 使用column（）。search（）DT排队搜索，并绘制（）DT链接到结果以更新表的显示。

第17 - 19行 - 使用column（）。cache（）DT方法从DataTables用于搜索表的列中获取数据。

第20 - 21行 - 实用程序方法sort（）DT和unique（）DT用于将数据减少到您希望呈现给最终用户的精美有序列表。

第22 - 24行 - 搜索字词选项已添加到我们的选择列表中，可供使用。

正如您所看到的，DataTables API非常灵活，并提供   访问和操作表格的各种选项。   有关的完整列表，请参阅API参考文档   可用的方法。此外，编辑器等插件可以   使用自定义方法扩展API，例如row（）。edit（）和   cell（）。edit（）以及其他选项。

Jquery dataTables columnFilter插件无法正常工作

1 个答案: