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

Question

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

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

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>')
        });
      });
    }
  });
});

Answer 1

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

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);                        
    } 
} );

此代码用于您在上面的链接上共享的数据表更改。希望它能帮到你。