在数据表中显示具有单个值的下拉过滤器

debugcn 发表于 Dev

哈里斯·扎法尔|

我正在使用数据表，并且列值是（tag1，tag2，tag3）逗号分隔，我为该列创建了一个下拉过滤器

并且该下拉列表的值类似于列值（tag1，tag2，tag3），以逗号分隔

但是下拉菜单中的每个选项我都需要一个值

标签1

标签2

标签3

等等

这是代码

initComplete: function () {
    this.api().columns([1]).every(function () {
        var column = this;
        var select = jQuery('<select id="test-haris"><option value=""></option> 
            < /select>')
                .appendTo(jQuery(column.header()).empty())
                .on('change', function () {
                    var val = jQuery.fn.dataTable.util.escapeRegex(
                        jQuery(this).val()
                    );
                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
        column.data().unique().sort().each(function (d, j) {
            select.append('<option value="' + d + '">' + d + '</option>')
        });
    });
}

安德鲁杰姆斯

以下方法从第一列的内容构建选择列表（下拉列表）。

对于该列中的每个单元格，它将逗号分隔的项目拆分为单独的文本，然后为下拉列表创建一个排序的唯一列表。

通过从下拉列表中选择一个项目进行搜索时，它将检查所选项目是否包含在该列中每个单元格的文本中的任何位置。为此，它使用了自定义DataTables过滤器。

就我而言，我将下拉列表放在表格的页脚中-您可以更改它。

该表如下所示：

这是下拉列表：

从下拉列表中选择一项后，您可以看到有效的过滤：

该解决方案的代码如下-我将其分为单独的部分/功能，以使结构和方法更加清晰：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

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

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger , John, Nixon , </td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>John, Garrett , Winters , </td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton, Winters , Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric , Kelly , Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

</div>

<script type="text/javascript">

$(document).ready(function() {
  
  // the DataTable object:  
  var table = $('#example').DataTable( {
    select: false // or, whatever you need in here.
  } );

  // Setup - add a select list to first footer cell:
  $('#example tfoot th').slice(0, 1).each( function () {
    var dropdown = buildDropdown();
    $(this).html( dropdown );
  } );


  // add a change event to the select list:
  $('#mySelect').change(function() {
    table.draw();
  });


  // create a custom search function for the select list,
  // which finds if the selected item is contained in the cell:
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      var selectedValue = $('#mySelect').val();
      console.log(selectedValue);
      if (data[0].includes(selectedValue)) {
        return true;
      } else {
        return false;
      }
    }
  );


  function buildDropdown() {
    var selectHtml;
    // this will hold array of distinct values:
    var items = [];
    table.columns([0]).data().each(function (data, index) {
      data.forEach(function (newItems, index) {
        newItems.split(',').forEach(function (newItem, index) {
          if ( newItem.trim() !== '' && items.indexOf(newItem) === -1) {
            items.push(newItem.trim());
          }
        });
      });
    });
    // sort and remove duplicates:
    var uniqueSortedItems = [...new Set(items)].sort();

    selectHtml = '<select id="mySelect"><option value=""></option>';
    uniqueSortedItems.forEach(function(item) { 
      selectHtml = selectHtml + '<option value="' + item + '">' + item + '</option>';
    });
    selectHtml = selectHtml + '</select>';

    return selectHtml;
  }


} );

</script>

</body>
</html>

我认为这是您要实现的目标-但是，您当然需要将其集成到您的特定解决方案中。

您还需要确定要对全局搜索功能执行的操作（如果正在使用它），因为它可能会干扰用于第一列的自定义搜索。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。