Question

我有一个由数据表组成的表。有一个复选框，单击该复选框可过滤表以仅显示我要查看的数据。问题是，当我取消选中该复选框时，该表会变成越野车。 table.destroy（）函数似乎确实将表还原为原来的样子，尽管看起来破坏了太多（每页行突然被忽略+无法再单击单元格，该单元格在另一个窗口中打开））。我猜想destroy（）是未选中时恢复到原始表/数据的正确方法。那么正确的方法是什么？

会发生以下情况： 1.单击复选框：正确过滤数据 2.取消选中该复选框：表看起来好像恢复了正常（但不是真的） 3.再次选中复选框：不再正确过滤数据。（表现在为空） 4.现在，无论我选中还是取消选中，表都保持不变（空）

这是我的代码：

var checkbox = $("#checkB");
checkbox.click(function () {
     var table = $('#WTM_LOG').DataTable();
     if (checkbox.is(":checked")) {
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var num = Number(data[4]);
                    if (num > 0) {
                        return true;
                    }
                    return false;
                }
            );
            table.draw();
        }
    else {
            table.destroy();    
        }
    });

这是我获取数据表数据的方式：

$(function LogTable() {

    //var sCsrfToken = $("input[name='__RequestVerificationToken']").val();
    //if (typeof sCsrfToken !== "string") {
    //    sCsrfToken = "";
    //}

    $.ajax({
        url: 'Home/GetTaskLog',
        type: 'post',
        processData: 'false',      
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            xyz(data)
        }
    });
});

function xyz(data) {
    $('#WTM_LOG').dataTable({
        //destroy: true,
        'dom': 'rtp',
        'order': [[0, 'desc']],
        //"ordering": false,       
        "pageLength": 20,
        "data": JSON.parse(data),
        selector: ':not(:first-child)',
        "columns": [
            {
                "data": "TaskSchedulerLogUid",
                "visible": false
            },
            {
                "data": 'TaskName',
                "visible": false
            },
            {
                "data": 'StartDate',
                "render": function (data, type, row) {
                    var dateSplit = data.split("");
                    if (type === "display" || type === "filter") {
                        return dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18];                        
                    }
                    return data;
                },
            },
            {
                "data": "EndDate",
                "render": function (data, type, row) {
                    var dateSplit = data.split("");
                    if (type === "display" || type === "filter") {
                        return dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18];
                    }
                    return data;
                },
            },
            {
                "data": "ErrorCount",
                "render": function (data, type, row) {
                    if (type === 'display') {                                            
                        return (data === 0)
                            ? data = '<span data-search="0"></span>'
                            : data = '<span data-search="1" type="hidden" class="fas fa-exclamation-triangle" style="color:red"></span>';
                    }                                   
                    return data;
                },               
            },
            {
                "data": "EventCount",
                "render": function (data, type, row) {
                    //var id = "details" + row.TaskSchedulerLogUid;     id="' + id + '"
                    return (data > 0)
                        ? data = '<span data-search="details" type="hidden" class="fas fa-list" style="color:blue"></span>'
                        : data = '';
                },
            },            
        ],
        columnDefs: [
            {
                targets: 2
            }
        ]
    });

Answer 1

我终于找到了答案。在“其他”部分，我刚刚写道：

else {
            $.fn.dataTable.ext.search.pop();
            table.draw();
        }

等等！

Answer 2

就这样！我发现了问题所在。这是最终的工作代码。

提示：我会绕过过滤器功能

var checkbox = $("#checkB");
var table = $('#example').DataTable();

$.fn.dataTable.ext.search.push(
  function (settings, data, dataIndex) {
      if (checkbox.is(":checked")) {
        return Number(data[1]) > 0 ? true : false;
      } else {
        return true;
      }
  }
);

checkbox.click(function () {
  if (checkbox.is(":checked")) {
    table.draw();
  } else {
    table.draw();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<input type="checkbox" id="checkB" value="Check"> Check this to filter
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Example</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Example1</td>
            <td>-10</td>
        </tr>
        <tr>
            <td>Example2</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Example3</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

复选框过滤器/搜索按钮：未选中时无法撤消过滤

2 个答案: