dataTables 按一列搜索过滤器答案

【问题标题】：dataTables Search filter by One ColumndataTables 按一列搜索过滤器
【发布时间】：2017-05-17 18:05:08
【问题描述】：

我将 datatables.net 用于我的网格视图。在搜索框中，它正在搜索所有列。但我想要像下面这样的场景。

我有 5 列，比如说 - 姓名、年龄、号码、地址、性别。当用户选择名称并在搜索框中输入文本时，我希望下拉列表和下拉列表中的所有这些选项，它只会在名称列中搜索。同样，如果用户从下拉列表中选择年龄，他只能搜索年龄列。

我见过很多例子，它们与我需要的不同。

【问题讨论】：

请向我们展示您的代码，以及您尝试过的...

标签： jquery twitter-bootstrap datatables

【解决方案1】：

这真的很容易，以各种方式多次询问 - 但令人惊讶的是我找不到完全匹配的。如果您有一个与您的列相对应的<select>：

<select id="select">
  <option>Seq.</option>
  <option>Name</option>
  <option>Position</option>
  <option>Office</option>
  <option>Start date</option>
  <option>Salary</option>
</select>

然后您可以通过.unbind() 劫持搜索框并定位与选择的selectedIndex 对应的列：

$('.dataTables_filter input').unbind().bind('keyup', function() {
  var colIndex = document.querySelector('#select').selectedIndex;
  table.column( colIndex).search( this.value ).draw();
});

演示 -> http://jsfiddle.net/8fLagfyp/

BTW: You can reset previous search when the select is changed by

$('#select').change(function() {
  table.columns().search('').draw();
});

【讨论】：

这是完美的。你是最棒的！我错过的唯一功能是我不知道如何将一列取消绑定和重新绑定到搜索框，我在任何地方都找不到。非常感谢。我在下拉列表中添加了全局选项（比如默认值）。如果用户选择全局，它应该搜索所有行。如何重置表格以搜索全局？还要选择更改的表搜索框正在重置。但它不能将表重置为初始值。你能告诉我我该怎么做吗？
??直截了当：如果“所有列”是<select> 中的第一项：if (colIndex == 0) { table.search( this.value ).draw() } else { table.column( colIndex-1 ).search( this.value ).draw() } ...您确实应该在您的问题中添加一些代码。
我明白先生。但我是 jquery 的新手，并试图使用 datatable.js 插件实现 asp.net Grid View。因此，在寻求帮助之前，我一直在寻找解决方案。但不幸的是，我找不到任何东西。这就是为什么我没有添加任何代码来提问。我在用户在搜索框上输入文本并选择更改后使用...... $('#select').change(function () { table.search(' ').draw(); });............但是表格没有重新加载到初始数据。我问的是无论如何要重置表格吗？
@crony，是的 - 使用 table.columns().search('').draw(); -> jsfiddle.net/8fLagfyp/1 而不是 table.search('').draw(); 我的坏...
非常感谢先生。这就是我想要的。感谢您的帮助！

【解决方案2】：

您可以禁用对除用户选择的列之外的其他列的搜索。 DataTable 有这个选项{ "searchable": false, "targets": 0 } 你可以动态改变这个配置对象。

您也可以使用columns().search() 动态指定应执行搜索的列。

e.g. table
    .columns( '.status' )
    .search( 'Important' )
    .draw();

【讨论】：

【解决方案3】：

这真的很容易，以各种方式多次询问 - 但令人惊讶的是我找不到完全匹配的。如果您有一个与您的列相对应的<select>：

<select class="form-control" id="ddlSearch">
    <option value="0">Name</option>
    <option value="1">Position</option>
    <option value="2">Office</option>
    <option value="3">Age</option>
    <option value="4">Start date</option>
    <option value="5">Salary</option>
</select>

然后实现此 JavaScript 以在单独的列中进行搜索

var table;

$(document).ready(function() {
    table = $('#example').DataTable({
        pageLength: 100,
        dom: 'lrtip',
    });
    var column_no = 0;
    $('#ddlSearch').on('change',function(){
        column_no = Number($(this).val());
    });

    $( '#txtSearch' ).on( 'input', function () {
        if ( table.columns([column_no]).search() !== $( '#txtSearch' ).val() ) {
            table.columns([column_no]).search( $( '#txtSearch' ).val() ).draw();
        }
    } );
});

例如试试这个https://jsfiddle.net/07rnpgs1/

一切顺利

【讨论】：