Jquery DataTable 事件未调用答案

【问题标题】：Jquery DataTable Event is not callingJquery DataTable 事件未调用
【发布时间】：2015-09-08 20:29:06
【问题描述】：

我正在使用 jquery 数据表。表工作正常。我的意思是正确加载记录。现在我想要的是，我需要过滤记录例如，我在 DataTable 中有很多记录，我想过滤（自定义）记录，这些记录只会显示特定列的正数。

所以，为此我创建了下面的函数。

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        alert('51');
        if (myFilter.val() == 1)
            return true;
        else if (myFilter.val() == 2)
            return (aData[3].indexOf('-') == -1);
        else
            return (aData[3].indexOf('-') != -1);
    }
);

但我不知道为什么它没有调用。我想调用这个函数。我已经使用服务器端处理方法进行绑定。我知道这个方法会在bind(draw)的时候调用。

我在任何地方都调用过这个函数，比如，

a) 在 $(document).ready 中，
b) DataTable 配置设置后
c) 在 $(document).ready 之外

而且，通常我手动重新创建了 DataTable。

 var oTable = $('#DataGrid').dataTable();                
            oTable.fnDestroy();
            $('#DataGrid').empty();

Tblheader = '<thead><tr><th> <select id="myFilter" class="select-filter"><option value="1">All</option> <option value="2">Positive</option> <option value="3">Negative</option> </select></th> </tr>      <tr><th rowspan="2" style="width: 5%;">Excl.</th><th rowspan="2">CUC</th> <th rowspan="2" > Late Model </th><th colspan="2">' +
                'Test1 </th><th colspan="2"> Test 2 </th> <th rowspan="2"> Test 3 </th><th id="thQtyParts" class="clsQtyParts" colspan="12" align="center"> Test 4 ' +
                                              '</th> <th rowspan="2"> Test 87 </th> <th rowspan="2"> Test 5 </th> <th colspan="4" align="center"> <input id="btnSurplus1" type="button" value="Positve" style="width: 100px;" /> Test 6 </th> <%--<th> &nbsp; </th>--%> ' +
                                              '</tr> <tr> <th> Test 7 </th> <th> Test 8</th><th> Test 8 </th> <th>Test 9</th><th> 12 </th> <th>11</th> <th> ' +
                                              '10 </th> <th>9 </th> <th> 8 </th> <th> 7  </th> <th> 6 </th>' +
                                              '<th> 5 </th>  <th>4 </th> <th> 3</th>  <th>2 </th> <th> 1  </th> <th> Test 22 </th> <th> test 23</th> <th>' +
                                              ' Test 11</th> <th> test 12</th> <%--<th>  &nbsp; </th>--%>   </tr> </thead>';

            $("#DataGrid").append(Tblheader);

            if (val == "Test Model") {

                $("#DataGrid").DataTable({
                    "iDisplayLength": 10,
                    "bServerSide": true,
                   /* "sDom": 'fltip', */
                    "sAjaxSource": '<%= Url.Action("GetTestData") %>',
                    "sServerMethod": "POST",
                    "fnServerParams": function (aoData) {
                        aoData.push({ "name": "ID", "value": $("#ddl1").val() },
                    { "name": "strCatg", "value": $("#ddlCat").val() })
                    },
                    "aoColumns": [{ sWidth: '1%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' },
                    { sWidth: '5%' }, { sWidth: '5%' }, { "targets": [10], "visible": false, "searchable": false }, { "targets": [11], "visible": false, "searchable": false },
                    { "targets": [12], "visible": false, "searchable": false }, { "targets": [13], "visible": false, "searchable": false }, { "targets": [14], "visible": false, "searchable": false },
                    { "targets": [15], "visible": false, "searchable": false }, { "targets": [16], "visible": false, "searchable": false }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' },
                    { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%'}],
                    "fnInitComplete": function (oSettings, json) {
                        setTimeout(function () { $.loader('close'); }, 1000);
                    }
                });

谢谢
-尼梅什

【问题讨论】：

你忘记了d) 在数据表被初始化之前！这将被自动调用。

标签： jquery asp.net-mvc c#-4.0 datatables

【解决方案1】：

终于找到了解决办法。我在

中创建了一个功能，例如在测试按钮 onclick 上

$(document).ready(function () {    
 $("#btnTest").click(function () {
                    $("#Grid").dataTable().fnDestroy();
                    $.fn.dataTableExt.afnFiltering.push(
                    function (oSettings, aData, iDataIndex) {                    
                        /* You code goes here */ 
                    });
                });

});

这对我来说很好。

【讨论】：