时间戳

首页 > 解决方案 > 选择下拉过滤器，在数据表中显示多条相同的记录

javascript - 选择下拉过滤器，在数据表中显示多条相同的记录

问题描述

我正在使用带有选择下拉过滤器的数据表。它运行良好。我的问题在选择下拉列表中，我得到的相同记录不止一个，因为我在表中有这样的记录。所以我必须只显示一个选项。

例如，我有一个表和记录就像

id    | name  | game      | ground 
1     | lkjh  | Cricket   | ground1
2     | poiu  | Baseball  | ground2
3     | qwee  | Cricket   | ground3
4     | adsd  | badminton | ground4
5     | poiu  | badminton | ground5

所以我得到了下拉菜单。（这只是一个例子）

<select>
<option>Cricket</option>
<option>Baseball</option>
<option>Cricket</option>
<option>badminton</option>
<option>badminton</option>
</select>

我需要这样

<select>
<option>Cricket</option>
<option>Baseball</option>
<option>badminton</option>
</select>

你能帮我解决这个问题吗？我正在使用以下脚本，参考链接是https://datatables.net/examples/api/multi_filter_select.html

$(document).ready(function() {
  $('#paymentList').DataTable({
    initComplete: function() {
      this.api().columns("2").every(function() {
        var column = this;
        var select = $('<select name="select_filter_action"><option value="">All</option></select>')
          .appendTo($("#select_filter_action").empty())
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          //console.log(d);
          select.append('<option value="' + d + '">' + d + '</option>')
        });
      });
    }
  });
});

标签： javascriptjqueryhtmldatatables

解决方案

在为过滤器创建选择选项时，您只需选择唯一值。您可以检查以下代码：

var selectOptionsCollections = [];
column.data().unique().sort().each( function ( d, j ) {
    if (jQuery.inArray(d, selectOptionsCollections) === -1) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
        selectOptionsCollections.push(d);                        
    } 
} );

此代码用于您在上述链接上共享的数据表更改。希望它可以帮助你。

推荐阅读