用复选框排序的数据表答案

【问题标题】：Datatables Sorting with checkbox用复选框排序的数据表
【发布时间】：2018-03-02 04:17:56
【问题描述】：

我在排序数据表时遇到问题。我有 4 个不同类别的复选框。但是一个数据中可能有 2 或 3 个类别，所以我想对它进行排序取决于我的复选框排序选择的内容。问题是，例如，我选择类别 1，它只会显示类别 1 的数据，而其他类别 1 和 2 的数据则不显示。我想要的是即使我只在复选框中选择类别 1，它也会显示类别 1 和 2 的数据

这是我的复选框代码

<ul class="list-unstyled">
  <li><small><label><input type="checkbox" onchange="filterme()" value="Ethereum" name="Category"><img src="<?php   bloginfo('template_url'); ?>/img/icon/data-eth.png">Ethereum</label></small></li>
  <li><small><label><input type="checkbox" onchange="filterme()" value="Neo" name="Category"><img src="<?php bloginfo('template_url'); ?>/img/icon/data-neo.png">Neo</label></small></li>
  <li><small><label><input type="checkbox" onchange="filterme()" value="Waves" name="Category"><img src="<?php   bloginfo('template_url'); ?>/img/icon/data-wave.png">Waves</label></small></li>
  <li><small><label><input type="checkbox" onchange="filterme()" value="Others" name="Category"><img src="<?php    bloginfo('template_url'); ?>/img/icon/data-other.png">Others</label></small></li>
</ul>

这是表格中的数据

<td class="category" hidden >
    <?php if ( get_field('sponsored_eth') == true ): ?> Ethereum <?php else: ?> <?php endif; ?>
    <?php if ( get_field('sponsored_neo') == true ): ?> Neo <?php else: ?> <?php endif; ?>
    <?php if ( get_field('sponsored_wave') == true ): ?> Waves <?php else: ?> <?php endif; ?>
     <?php if ( get_field('sponsored_other') == true ): ?> Others <?php else: ?> <?php endif; ?>
</td>

这是我的 Jquery 代码：

function filterme() {
    //build a regex filter string with an or(|) condition
    var types = $('input:checkbox[name="Category"]:checked').map(function() {
      return '^' + this.value + '\$';
    }).get().join('|');
    //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
    otable.fnFilter(types, 1, true, false, false, false);

    //use radio values
    var frees = $('input:radio[name="free"]:checked')[0].value;
    //now filter in column 2, with no regex, no smart filtering, no inputbox,not case sensitive
    otable.fnFilter(frees, 2, false, false, false, false);
}

【问题讨论】：

标签： php jquery html

【解决方案1】：

对于复杂的搜索，您需要使用自定义搜索功能，请参阅Search plug-in development 或this example。

例如：

function filterme(){
    var table = $('#example').DataTable();

    $.fn.dataTable.ext.search = [ 
        function( settings, data, dataIndex ) { 
            var success = false;

            /* Apply your search conditions here */

            return success; 
        }
    ];

    table.draw();
}

请注意，您需要 DataTables 1.10.x 才能运行以下代码。

对于 DataTables 1.9.x，请参阅 Plug-in row filtering functions。

DataTables 1.10.x 也向后兼容 DataTables 1.9.x。

【讨论】：