Question

我正在使用数据表，我希望能够在表中搜索与数据表无关的html输入

我的HTML：

<div id="general>
<input type="text" id="name"/>
<input type="text" id="lastname"/>
<input type="text" id="birthday"/>
<table id="table-search" class="display col-sm-4">
    <thead>
    <tr>
    <th>name</th>
    <th>lastname</th>
    <th>birthday</th>
    <th>blah</th>
    </tr>
    </thead>
    <tbody>
     <tr> 
        <td>john</td> 
         <td>doe</td>
        <td>1970/1/1</td>
        <td>bla bla</td>
        <td>johnny</td> 
         <td>doenut</td>
        <td>1970/1/1</td>
        <td>bla bla</td>
      </tr>
    </tbody>
     </table>
 </div>

如果我在john输入中将name放入doe输入+ lastname，我希望得到结果：

  |john|doe
  |johnny|doenut

我设法使用fnFilter()在表格中搜索，但我不能像value1 AND value2 AND value3那样进行研究。它会删除之前的valueX结果。

    $('.general input').keyup( function () {
    var name =  $('#name').val();
    var lastname =  $('#lastname').val();
    var birthday =  $('#birthday').val();

      oTable.fnFilter( name+lastname+birthday ); <-- i want a request like this


    })

Answer 1

您可以向DataTables添加自定义过滤器，只需使用$.fn.dataTable.ext.search.push();，但将所有过滤器传递给它。当你看到它时更有意义。例如：

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
    var filterFirstName = $('#name').val();
    if(filterFirstName == '') { return true; }
    return data[0].indexOf(filterFirstName) != -1;
  },
  function(settings, data, dataIndex) {
    var filterLastName = $('#lastname').val();
    if(filterLastName == '') { return true; }
    return data[1].indexOf(filterLastName) != -1;
  }
);

该代码将添加两个过滤器，一个用于名字，一个用于最后一个。您可以看到它首先获得两个过滤器输入的值，如果它们未被设置为任何值，则返回true（如果所有过滤器的行传递为true，则将显示它，否则将被隐藏）。如果过滤器有值，我们可以将它与相应列中显示的值进行比较（data这里是当前行中数据的数组 - 0是第一个名称列的位置，1是姓氏列。如果值不匹配，则返回false（隐藏列）如果它们返回true，则返回true（同样，如果所有过滤器都为true，则显示该行）。

然后你只需要在keyup上重新绘制表格以获取输入：

$('#general input').keyup(function() {
    oTable.draw();
});

您可以在此处查看您的数据：https://jsfiddle.net/v7okphu3/

数据表：来自输入领域的多标准研究

1 个答案: