Получить параметры «Все» в раскрывающемся фильтре плагина jquery datatables

Question

У меня есть два раскрывающихся фильтра в заголовке столбца jQuery Datatable. Я могу фильтровать все данные строки без каких-либо проблем. Проблема, с которой я столкнулся, заключается в том, что у меня есть раскрывающийся список со следующими значениями: «оценка 1», «оценка 2», «оценка 3». Если я отфильтровываю «оценка 1», я вижу «оценка 1» в таблице. Но после фильтрации, если я хочу увидеть все данные строки, мне нужно нажать refre sh в браузере. Поэтому, чтобы избежать этого, я хотел добавить в фильтр опцию «Все», и если я нажму «Все», я должен увидеть все значения в строке. Как мне это сделать?

 <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>

Я пробовал это Добавить опцию «Показать все» в раскрывающемся фильтре таблиц данных

Я пробовал решение, указанное в предыдущая ссылка. Ниже я покажу, как я это пробовал. Я не уверен, что именно так я должен попробовать это

 <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>

Удачного кодирования!