Checkbox for disable searching on specific column

Question

I am trying to make checkboxes for a table, with the help of which, I could turn off the search mode on certain columns. Unfortunately so far without success. Is there a hint on how to disable the search on a specific column by clicking on a checkbox or button?

Something like that:

dt = $('#mytable').DataTable();
$('#disall').click(function() {
    dt.columns[0].searchable = false;
    dt.columns[1].searchable = false;
    dt.columns[2].searchable = false;
    dt.columns[4].searchable = false;
    dt.columns[5].searchable = false;
});

My table:

$('#mytable').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "server_processing.php",
    columns: [
        {
            data: 'ID',
            "searchable": true
        },
        {
            data: 'UF_INPUT_URL',
            "searchable": true,
            "render": function(data, type, row) {
                var shortTitle = truncate(data, 30);
                return "<a target='_blank' href='" + data + "'>" + shortTitle + "</a>";
            }
        },
        {
            data: 'UF_OUTPUT_URL',
            "searchable": true,
            "render": function(data, type, row) {
                var shortTitle = truncate(data, 30);
                return "<a target='_blank' href='" + data + "'>" + shortTitle + "</a>";
            }
        },
        {
            data: 'UF_CMS',
            "searchable": true
        },
        {
            data: 'UF_EMAILS',
            "searchable": true,
            "render": function(data, type, row) {
                return data.split(",").join("<br/>");
            }
        },
        {
            data: 'UF_SOCIAL',
            "searchable": true,
            "render": function(data, type, row) {
                return data.split(",").join("<br/>");
            }
        }
    ],
    "deferRender": true,
    "responsive": true,
    "bFilter" : true,
    "bLengthChange": false,
    "searching": true,
    "bInfo": false,
    "paging": true,
    "bAutoWidth": false,
});

PS Judging by the comments, you don't read the question at all, but put dislikes right away... Please read the question and then write comments. Thank)

Answer 1

You can achieve this by implementing a custom search function.

Here is my table with 6 columns. Just for illustration, I have added 3 checkboxes - so you would need to add the remaining ones to complete this exercise.

The checkboxes are as follows:

  <div>
    <input type="checkbox" id="name" name="name" checked>
    <label for="name">Name</label>
  </div>
  <div>
    <input type="checkbox" id="pos" name="position" checked>
    <label for="pos">Position</label>
  </div>
  <div>
    <input type="checkbox" id="off" name="off" checked>
    <label for="off">Office</label>
  </div>

The DataTable script is as follows:

$(document).ready(function() {

  var checkedCols = [];

  $.fn.dataTable.ext.search.push(
     
    // https://datatables.net/manual/plug-ins/search#Plug-in-structure
    function( settings, searchData, index, rowData, counter ) {

      var searchText = $('div.dataTables_filter input').val().toLowerCase();
      if (searchText === '') {
        return true;
      }

      if (counter === 0) { // we are starting a new search
        checkedCols = [];
        if ( $('input#name:checked').length === 1 ) { checkedCols.push(0); }
        if ( $('input#pos:checked').length === 1 )  { checkedCols.push(1); }
        if ( $('input#off:checked').length === 1 )  { checkedCols.push(2); }
      }
      var colData = [];
      for (var i = 0; i < checkedCols.length; i++) {
        colData.push(searchData[checkedCols[i]]);
        if ( searchData[checkedCols[i]].toLowerCase().includes(searchText) ) {
          return true;
        }
      }
      return false;
    }
  );

  $('#example').DataTable( {
    // your initialization items in here.
  } );


} );

Points to note:

As well as adding the remaining HTML checkboxes, you would need to update the custom search logic to also refer to the added checkboxes.

I use an array var checkedCols = []; to track the status of the checkboxes.

I use the DataTables function $.fn.dataTable.ext.search.push to catch filter events.

At the start of each filter event, we see which checkboxes are checked.

Then, for each row of data, we build a new array containing only the data for the checked fields. We use the data in this new array when applying the search:

if ( searchData[checkedCols[i]].toLowerCase().includes(searchText) ) {...}

The solution could be refined a bit. For example, the search is not re-applied when someone makes changes to the checkboxes - but that can be added using checkbox change events and the DataTables search() API.

Here is an example, where the Name checkbox is unchecked - and the search term "Airi" fails to find any data: