时间戳

首页 > 解决方案 > 修改后 datatables.search 函数的奇怪行为

javascript - 修改后 datatables.search 函数的奇怪行为

问题描述

这个问题是这个问题的后续。

我创建了这个 JSFiddle用于演示目的。

请注意，在 column1 中搜索值时，搜索会按预期工作。但是，当在 column2 中搜索一个值（使用相同的“搜索字段”）时，data_table.search似乎根本没有被调用，并且找不到相关的行（按 F12 在控制台中查看调试信息）。

var data_table = $("#table").DataTable();
var search_term = null;
$.fn.DataTable.ext.search.push(
  function(settings, row, index) {
    if (search_term) {
      search_term = search_term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
      search_term = search_term.toLowerCase();
    }

    console.log(`search_term is ${search_term}`)


    var approver = $(data_table.cell(`:eq(${index})`, ':eq(0)').node()).find('.approver-select').val().toLowerCase();
    console.log(`approver is ${approver}`)

    var approver_match = approver.match(search_term);
    console.log(`approver_match is ${approver_match}`)

    var network_or_group = $(data_table.cell(`:eq(${index})`, ':eq(1)').node()).find('.network-or-group-text').val().toLowerCase();
    console.log(`network_or_group is ${network_or_group}`)

    var network_or_group_match = network_or_group.match(search_term);
    console.log(`network_or_group_match is ${network_or_group_match}`)

    console.log(`approver_match || network_or_group_match || !search_term is ${approver_match || network_or_group_match || !search_term}`)

    console.log('')
    console.log('')

    return approver_match || network_or_group_match || !search_term;
  }
);

$('#table_filter input', data_table.table().container()).on('keyup.DT cut.DT paste.DT input.DT search.DT', event => {
  search_term = $(event.target).val();
  data_table.draw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <table id="table">
    <thead>
      <th>column1</th>
      <th>column2</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <select class="approver-select">
            <option selected>user1</option>
            <option>user2</option>
          </select>
        </td>
        <td>
          <input class="network-or-group-text" type="text" value="1.1.1.1/32">
        </td>
      </tr>
      <tr>
        <td>
          <select class="approver-select">
            <option>user1</option>
            <option selected>user2</option>
          </select>
        </td>
        <td>
          <input class="network-or-group-text" type="text" value="2.2.2.0/24">
        </td>
      </tr>
    </tbody>
  </table>
</body>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

</html>

标签： javascriptdatatables

解决方案

使用该html-input类型的一种更简单的方法如下。您定义要定位的列，并在搜索时返回值。它适用于选择和输入。

您不需要检查，keyup.DT cut.DT paste.DT input.DT search.DT因为数据表也会自动为您执行此操作。

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
  return $(value).val();
};

var data_table = $("#table").DataTable({
  columnDefs: [{
    "type": "html-input",
    "targets": [0, 1]
  }]
});
<html>

<body>
  <table id="table">
    <thead>
      <th>column1</th>
      <th>column2</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <select class="approver-select">
            <option selected>user1</option>
            <option>user2</option>
          </select>
        </td>
        <td>
          <input class="network-or-group-text" type="text" value="1.1.1.1/32">
        </td>
      </tr>
      <tr>
        <td>
          <select class="approver-select">
            <option>user1</option>
            <option selected>user2</option>
          </select>
        </td>
        <td>
          <input class="network-or-group-text" type="text" value="2.2.2.0/24">
        </td>
      </tr>
    </tbody>
  </table>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

</html>

这更简洁，并使用数据表的基本类型属性，而不是像您现在所做的那样在搜索时过滤所有数据。

推荐阅读