Question

我正在使用datatables.net进行网格视图。在搜索框中，它将从所有列进行搜索。但我想要下面的场景。

我有5列，比方说 - 名字，年龄，数字，地址，性别。我希望下拉列表中的所有选项以及当用户选择名称并在搜索框中输入文本时从下拉列表中选择所有这些选项，它将仅在名称列中搜索。如果用户从下拉菜单中选择年龄，他就可以只搜索年龄列。

我见过许多与我需要的不同的例子。

Answer 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();
});

演示 - ＆gt;的 http://jsfiddle.net/8fLagfyp/

顺便说一句：当用
更改选择时，您可以重置以前的搜索
$('#select').change(function() { table.columns().search('').draw(); });

Answer 2

除了用户选择的内容之外，您可以禁用其他列的搜索。 DataTable具有此选项{ "searchable": false, "targets": 0 }，您可以动态更改此配置对象。

或者，您还可以使用columns().search()动态指定应在其上执行搜索的列。

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

Answer 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/

一切顺利

dataTables按一列搜索过滤器

3 个答案: