Question

所以我有一张桌子，我在tfooter中使用了选择框。实际上我使用datatables插件来创建表。

$(document).ready(function () {

    $('#simpleClassTable').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{% url 'simpleclasssummaryjson' %}",
        "lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
        "aoColumnDefs": [],
        "aaSorting": [[4,'desc'], [3,'desc']],
        "oLanguage": {
            "sSearch": "Search all columns:"
        },
     })
});

在表格页脚中，我有选择框

    <tfoot>   
    <tr>
    <th>name</th>
    <th>
        <select id='filterOnDiff'>
            <option value="">All</option> 
            <option value="2">2</option> 
            <option value="5">5</option> 
            <option value="21">21</option> 
            <option value="22">22</option> 
            <option value="25">25</option> 
        </select>
    </th>
    ...
    </tr>
    </tfoot>

我定义了一个jquery函数，它通过选择框值过滤表。

$('#filterOnDiff').on('change', function() {
    var table = $('#simpleClassTable').DataTable();
    table.column(1).
        search($(this).val()).
           draw();
});

一切正常。对于精确值（比方说21,22，..）但它不适用于值＆＃34; 2＆＃34;。

即如果我选择值2，那么表格将返回值＆＃34; 2＆＃34;，＆＃34; 21＆＃34;，＆＃34; 22＆＃34;，...

所以我的问题是如何更改javascript函数以过滤到精确值？

以下是使用21.

的正确过滤

以下是使用2.

的错误过滤

Answer 1

您可以使用search API作为正则表达式，将搜索值包含在前导^和尾随$，并将第二个参数设为true，将第三个参数设为false }。这是similar example。

因此，请尝试将代码重写为：

$('#filterOnDiff').on('change', function() {
  var table = $('#simpleClassTable').DataTable();
  table.column(1).
    search(this.value && `^${this.value}$`, true, false).
      draw();
});

plunker：https://plnkr.co/edit/jCKGSY?p=preview，尝试过滤ID＆＃39;柱

Jquery数据表使用select / Filter精确值进行过滤

1 个答案: