fn.dataTable.ext.search.push 中未定义的 ext - Javascript (1)

📌 相关文章

📜 fn.dataTable.ext.search.push 中未定义的 ext - Javascript (1)

📅 最后修改于: 2023-12-03 14:41:17.605000 🧑 作者: Mango

在 fn.dataTable.ext.search.push 中未定义的 ext - Javascript

在使用DataTables时，您可以使用fn.dataTable.ext.search.push函数自定义搜索过程。这个函数用于在DataTable搜索API的内部调用中执行额外的过滤器。这里我们将介绍如何自定义一个ext来使用fn.dataTable.ext.search.push。

步骤

在DataTable初始化之前，在HTML文件中引入jQuery和DataTables插件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DataTable Search Extension Demo</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>25</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

初始化DataTable并注册自定义扩展。

$(document).ready(function() {

  // Define custom ext function 
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var minAge = parseInt($('#age_min').val());
      var maxAge = parseInt($('#age_max').val());
      var age = parseInt(data[2]) || 0;
 
      if ((isNaN(minAge) && isNaN(maxAge)) ||
         (isNaN(minAge) && age <= maxAge) ||
         (minAge <= age && isNaN(maxAge)) ||
         (minAge <= age && age <= maxAge)) {
        return true;
      }
      return false;
    }
  );
 
  // Initialize DataTable
  var table = $('#myTable').DataTable();
   
  // Add custom controls
  $('#age_min, #age_max').keyup( function() {
    table.draw();
  });

});

添加定义数据和控制栏。这里我们添加两个input框来控制扩展。

<div class="controls">
  Age between:
  <input id="age_min" type="text" placeholder="Min Age">
  and
  <input id="age_max" type="text" placeholder="Max Age">
</div>

让我们来分解这个自定义扩展。在这里，我们使用一个类似过滤的函数，该函数将在搜索API内部进行调用。这个函数接收3个参数：settings(当前DataTable设置)，data(当前行的数据)和dataIndex(当前行索引)。该函数应返回一个布尔值，表示是否包括当前行。

function(settings, data, dataIndex) {
  var minAge = parseInt($('#age_min').val());
  var maxAge = parseInt($('#age_max').val());
  var age = parseInt(data[2]) || 0;
 
  if ((isNaN(minAge) && isNaN(maxAge)) ||
     (isNaN(minAge) && age <= maxAge) ||
     (minAge <= age && isNaN(maxAge)) ||
     (minAge <= age && age <= maxAge)) {
    return true;
  }
  return false;
}

我们使用jQuery从控件栏获取最小年龄和最大年龄值，并将其转换为整数。然后，我们从每行数据中获取年龄并将其转换为整数。这是因为我们在控件里输入了字符串，因此我们需要将其转换为数字。如果任何一个转换失败，我们默认值为0。接下来，我们使用逻辑运算符计算筛选条件是否属于筛选范围。

5.最后，我们需要更新DataTable表格以使用自定义扩展。

$('#age_min, #age_max').keyup( function() {
  table.draw();
});

我们绑定控件的keyup事件，在输入数字时触发DataTable的draw()方法，以更新筛选器。

完整代码：

您可以在下面找到所有代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DataTable Search Extension Demo</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>
<body>
  <div class="controls">
    Age between:
    <input id="age_min" type="text" placeholder="Min Age">
    and
    <input id="age_max" type="text" placeholder="Max Age">
  </div>
  <table id="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>25</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane</td>
        <td>30</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Mike</td>
        <td>20</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mary</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>

  <script type="text/javascript">
    $(document).ready(function() {

      // Define custom ext function 
      $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
          var minAge = parseInt($('#age_min').val());
          var maxAge = parseInt($('#age_max').val());
          var age = parseInt(data[2]) || 0;
   
          if ((isNaN(minAge) && isNaN(maxAge)) ||
             (isNaN(minAge) && age <= maxAge) ||
             (minAge <= age && isNaN(maxAge)) ||
             (minAge <= age && age <= maxAge)) {
            return true;
          }
          return false;
        }
      );
   
      // Initialize DataTable
      var table = $('#myTable').DataTable();
       
      // Add custom controls
      $('#age_min, #age_max').keyup( function() {
        table.draw();
      });

    });
  </script>

</body>
</html>

结论

这就是如何使用fn.dataTable.ext.search.push函数创建自定义搜索筛选器的一个简单示例。我们希望这个指南能够帮助您了解如何使用DataTables搜索API自定义您的数据表。