如何将我的自定义 jquery 表行过滤与 datatables.net 集成？

Posted 2023-05-09

【中文标题】如何将我的自定义 jquery 表行过滤与 datatables.net 集成？

【英文标题】：How can I integrate my custom jquery table row filtering with datatables.net?

【发布时间】：2016-10-24 11:32:26

【问题描述】：

我有一个 html 表，并且有一个显示“显示已完成订单”的复选框，当我取消选中此框时，我会使用 jquery 遍历表行并隐藏处于 COMPLETED 状态的行。 （基于单元格中的字符串 = "COMPLETE"）

我现在开始使用datatables.net，这对于排序和通用用户搜索非常有用，但我正在努力弄清楚如何让我现有的隐藏和显示行的代码与 datatables.net 默认值一起很好地工作能力。

这是否可能有外部自定义逻辑来隐藏和显示行并且仍然让数据表成功运行（条带化、过滤、排序等）。

【参考方案1】：

如果您愿意，可以在 DataTable 中按列搜索，您应该使用包含“state”列的结构，例如：

<table id="example" class="display DataTable" cellspacing="0" >
    <thead>
        <tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>State</th></tr>
    </thead>

    <tbody>
        <tr><td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>2009/02/27</td><td>COMPLETE</td></tr>
        <tr><td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>30</td><td>2010/07/14</td><td>INCOMPLETE</td></tr>
        <tr><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>2008/11/13</td><td>INCOMPLETE</td></tr>
        <tr><td>Michael Bruce</td><td>javascript Developer</td><td>Singapore</td><td>29</td><td>2011/06/27</td><td>COMPLETE</td></tr>

    </tbody>
</table>

还有一个 CheckBox 用于填充状态表：

<input type="checkbox" id="myCheckbox" /> Show Complete Orders

DataTables 有一个 columns().search() 函数来搜索列的值 (search( input , regex, smart , caseInsen ))：

$(document).ready(function() 
var oTable = $('#example').DataTable();

$("#myCheckbox").on("change",function()

    if($(this).is(":checked"))
       oTable
         .columns(5)
         .search("^" + "COMPLETE" + "$", true, false, true)
         .draw();        
    else
       oTable
         .columns(5)
         .search("")
         .draw();
    

);

);

结果： https://jsfiddle.net/cmedina/7kfmyw6x/67/

【讨论】：

澄清我不想隐藏 INCOMPLETE 订单。所以我想要的 2 种模式是：1. 全部显示（包括已完成），2. 只显示未结订单