Get 'All' options in the dropdown filter of jquery datatables plugin

Question

I have two dropdown filters in my jQuery Datatable column header. I can filter all the row data without any issues. The problem I'm facing here is that I have a dropdown with the following values: "grade 1", "grade 2", "grade 3". If I filter 'grade 1' I can see the 'grade 1' in the table. But after filtering if I want to see all the row data I have to click refresh in the browser. So to avoid it I wanted to add an 'All' option in the filter and if I click 'All' I should see all the values in the row. How should I do that?

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

I have tried this Add "Show All" option in dropdown filter of datatables

I have tried the solution given in the previous link. I am showing below how did I tried this. I am not sure this is the way I have to try this

 <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

Actually you were pretty close.

You made a mistake in this line:

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

It should be like this:

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

Look at my example:

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>