在 jquery 数据表插件的下拉过滤器中获取“全部”选项

Question

我的 jQuery Datatable 列标题中有两个下拉过滤器。我可以毫无问题地过滤所有行数据。我在这里面临的问题是我有一个包含以下值的下拉列表：“1 年级”、“2 年级”、“3 年级”。如果我过滤“1 级”，我可以在表格中看到“1 级”。但过滤后，如果我想查看所有行数据，我必须在浏览器中单击刷新。所以为了避免它，我想在过滤器中添加一个“全部”选项，如果我点击“全部”，我应该会看到该行中的所有值。 我该怎么做？

 <script>
        $(document).ready(function () {
            $('#table').DataTable({
                "columnDefs": [
                    { "visible": false, "targets": 2 },
                    {
                        "targets": [1, 2, 3, 4, 5],
                        "orderable": false,
                    }],
                initComplete: function (d) {
                    this.api().columns([3, 4]).every(function () {
                        var column = this;
                        var Jobs = $("#table th").eq([d]).text();
                        var select = $('<select class="drop-down"><option value="0" ">ALL</option></select>')
                            .appendTo($(column.header()))
                            .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) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                }

            });
        });

    </script>

我试过这个 Add "Show All" option in dropdown filter of datatables

我已经尝试了上一个链接中给出的解决方案。我在下面展示了我是如何尝试的。我不确定这是我必须尝试的方式

 <script>
        $(document).ready(function () {
            $('#table').DataTable({
                "columnDefs": [
                    { "visible": false, "targets": 2 },
                    {
                        "targets": [1, 2, 3, 4, 5],
                        "orderable": false,
                    }],
                initComplete: function (d) {
                    this.api().columns([3, 4]).every(function () {
                        var column = this;
                        var Jobs = $("#table th").eq([d]).text();
                        var select = $('<select class="drop-down"><option value="0" ">ALL</option></select>')
                            .appendTo($(column.header()))
                            .on('change', function () {
                                 var filterValue = $(this).val();

       if ( filterValue == '0' ){  // Check for show all option
            table.search(filterValue).draw(); 

       } else {
            table.search(filterValue).draw();
       }

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

            });
        });

    </script>

Answer 1

其实你已经很接近了。

你在这行写错了：

var select = $('<select class="drop-down"><option value="0" ">ALL</option></select>')

应该是这样的：

var select = $('<select class="drop-down"><option value="">ALL</option></select>')

看我的例子：

var jsonData = [
  { 
     "Name": "Tiger Nixon",
     "Position": "System Architect",
     "Office": "Edinburgh",
     "Age": 61,
     "Grade": "Grade 1",
     "Salary": "$320,800"
  },
  { 
     "Name": "Garrett Winters",
     "Position": "Accountant",
     "Office": "Tokyo",
     "Age": 63,
     "Grade": "Grade 2",
     "Salary": "$170,750"
  },
  { 
     "Name": "Ashton Cox",
     "Position": "Junior Technical Author",
     "Office": "San Francisco",
     "Age": 66,
     "Grade": "Grade 3",
     "Salary": "$86,000"
  }
];

var table = $('#example').DataTable({
    columnDefs: [
        //{ "visible": false, "targets": 2 },
        { targets: [1, 2, 3, 4, 5], orderable: false,
    }],
    data: jsonData,
    initComplete: function (d) {
      this.api().columns([3, 4]).every(function () {
        var column = this;
        var Jobs = $("#table th").eq([d]).text();
        var select = $('<select class="drop-down"><option value="">ALL</option></select>')
                            .appendTo($(column.header()))
                            .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) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                            });
                });
        },
    columns: [
      { data: 'Name' },
      { data: 'Position' },
      { data: 'Office' },
      { data: 'Age' },
      { data: 'Grade' },
      { data: 'Salary' }
    ]
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Grade</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>