DataTables 按 TR 数据属性自定义选择过滤

问题描述 投票：0回答：1

我正在使用 DataTables，并添加了一些用于过滤的自定义下拉列表，这些下拉列表具有 

<tr>
数据属性的值。我读过的所有内容都提到了如何按数据属性进行过滤
<td>
。我不知道如何实现这个，因为我对数据表不太熟悉。

创建了一个小提琴：https://jsfiddle.net/pegues/4bw5s0gd/1/

HTML：

<select id="custom-select-filter-1">
    <option value="">Please select filter 1...</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

<select id="custom-select-filter-2">
    <option value="">Please select filter 2...</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
    <option value="six">Six</option>
</select>

<table id="example">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>
        <tr data-testattribute1="one" data-testattribute2="four">
            <td>1</td>
            <td>Apples</td>
            <td>Fruit</td>
        </tr>
        <tr data-testattribute1="two" data-testattribute2="five">
            <td>2</td>
            <td>Oranges</td>
            <td>Fruit</td>
        </tr>
        <tr data-testattribute1="three" data-testattribute2="six">
            <td>3</td>
            <td>Lexus</td>
            <td>Cars</td>
        </tr>
        <tr data-testattribute1="one" data-testattribute2="five">
            <td>4</td>
            <td>Winchester</td>
            <td>Guns</td>
        </tr>
    </tbody>
</table>

JavaScript：

$(document).ready(function(){       
    $('#example').DataTable({
        order: [[1, 'Name']],
    });
    
    $('#custom-select-filter-1').on('change', function(){
        var selectVal = $(this).val();
        
        console.log(selectVal);
    });
    
    $('#custom-select-filter-2').on('change', function(){
        var selectVal = $(this).val();
        
        console.log(selectVal);
    });
});

我已经查看了 DataTables 文档，但不明白如何根据行而不是列单元格的数据属性进行过滤。

例如，如果从第一个下拉列表中选择 

one
，则显示所有匹配的行，如 
<tr data-testattribute1="one">
中所示。如果第一个下拉列表是 
one
并且第二个下拉列表是 
five
，则显示所有 
<tr data-testattribute1="one" data-testattribute2="five">
，并隐藏所有其他行。

如有任何帮助，我们将不胜感激。

javascript datatables
1个回答
2
投票

您可以使用 DataTables 搜索插件

为此创建自定义过滤器 
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex)

这定义了您的过滤条件，并在数据重绘时将该函数推送到 DataTables 使用的过滤函数数组（由分页、排序和过滤等用户操作触发）。

在您的情况下，逻辑将类似于以下内容：

$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
    var trNode = settings.aoData[dataIndex].nTr;
    var attr1 = trNode.getAttribute("data-testattribute1");
    var attr2 = trNode.getAttribute("data-testattribute2");
    
    var val1 = $('#custom-select-filter-1').val();
    var val2 = $('#custom-select-filter-2').val();
         
    if ( (val1 === "" || val1 === attr1) 
        && (val2 === "" || val2 === attr2) ) {
        return true;
    }
    return false;
});

您可以通过表的设置对象访问 DataTable 数据行的 

<tr>
节点：
settings.aoData[dataIndex].nTr
。

从这里开始，就需要获取属性并将它们与用户输入进行比较。空字符串（空输入）表示“无过滤器”。

这是一个可运行的演示：

$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
  var trNode = settings.aoData[dataIndex].nTr;
    var attr1 = trNode.getAttribute("data-testattribute1");
    var attr2 = trNode.getAttribute("data-testattribute2");
    
    var val1 = $('#custom-select-filter-1').val();
    var val2 = $('#custom-select-filter-2').val();
     
  if ( (val1 === "" || val1 === attr1) 
      && (val2 === "" || val2 === attr2) ) {
      return true;
  }
  return false;
});

$(document).ready(function(){

    var table = $('#example').DataTable({
        order: [[1, 'Name']],
    });
    
    $('#custom-select-filter-1').on('change', function(){
        table.draw();
    });
    
    $('#custom-select-filter-2').on('change', function(){
        table.draw();
    });
});
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

<select id="custom-select-filter-1">
    <option value="">Please select filter 1...</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

<select id="custom-select-filter-2">
    <option value="">Please select filter 2...</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
    <option value="six">Six</option>
</select>

<table id="example">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>
        <tr data-testattribute1="one" data-testattribute2="four">
            <td>1</td>
            <td>Apples</td>
            <td>Fruit</td>
        </tr>
        <tr data-testattribute1="two" data-testattribute2="five">
            <td>2</td>
            <td>Oranges</td>
            <td>Fruit</td>
        </tr>
        <tr data-testattribute1="three" data-testattribute2="six">
            <td>3</td>
            <td>Lexus</td>
            <td>Cars</td>
        </tr>
        <tr data-testattribute1="one" data-testattribute2="five">
            <td>4</td>
            <td>Winchester</td>
            <td>Guns</td>
        </tr>
    </tbody>
</table>

</div>



</body>
</html>

注意使用

table.draw();
触发重画；请注意，
table
变量已添加到创建数据表的代码中，以支持
draw()
调用：

var table = $('#example').DataTable({ ...
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.