Question

我有一个html表，我有一个复选框，上面写着＆＃34;显示已完成的订单＆＃34;，当我取消选中此框时，我使用jquery循环遍历表行并隐藏COMPLETED中的行州。（基于单元格中的字符串=＆＃34; COMPLETE＆＃34;）

我现在开始使用datatables.net，这对于排序和通用用户搜索非常有用，但我很想知道如何获取隐藏的现有代码并显示行与数据表一起很好地工作。净违约能力。

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

Answer 1

如果需要，在DataTable中按列搜索，您应该使用列＆＃34; state＆＃34;例如：

<table id="example" class="display DataTable" cellspacing="0" width="100%">
    <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/

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

1 个答案: