How to set columns from checkboxes for filtering datatable jQuery

Question

I working with datatables, and i try to make filtering possibility, and problem is that i want to chosse from checkboxes which column i need to filter.

So in case if i chosse one column i result i got 4 or 5 column, but i chosse 1, and i can find where the issues. [![enter image description here][1]][1]

As u can see on the image, i chose only one Stantion code but i got 5 columns for filtering, but i must have only one.

My code: [jsfinddle][2]

addSpliting('');

function addSpliting(val) {
  
  if(val != '') {
      
      $("#test1").DataTable({
        destroy: true,
        searchPanes: {
          layout: 'columns-4',
        },
        dom: 'Pfrtip',
        columnDefs: [{
          searchPanes: {
            show: true,
          },
          targets: val
        }]
      });
   }
   else {
      $("#test1").DataTable({
         destroy: true
      });
   }
}

function setFilters() {
  
  $("table thead tr th").each(function(index) {
    
    var boxes = `<label>
                <input type="checkbox" class="checkbox" id="${index}"/>
                ${$(this).text()}
                </label>`
    if ($(this).text() != "") $(".checkBoxes").append(boxes);
  });
}

setFilters();

$("#createFilter").on("click", function() {
   var columFilters = [];
  
   $('.checkbox:checked').each(function () {
      columFilters.push(parseInt($(this).attr('id')));
   });
  
   addSpliting(columFilters);
});

Answer 1

I tried to find anything in the docs related to your question but couldnt find anything. To me it seems there is no native way to configure your wanted layout. It also looks like no matter what targets you define the search pane is rendered for every column. But by knowing that I found a "hacky" way of implementing that feature.

Every search pane is put inside a div with the following class: .dtsp-searchPanes

Now simply iterate over each child div inside and check if the current iteration is included inside your val array. If its not: hide the corresponding div otherwise show the div.

Your addSplitting function should look like this:

 function addSpliting(val) { if (val != '') { $("#test1").DataTable({ destroy: true, searchPanes: { layout: 'columns-4', }, columnDefs: [{ searchPanes: { show: true, }, targets: '_all' }], dom: 'Pfrtip' }); $('.dtsp-searchPanes').children().each(function(i, obj) { if (!val.includes(i)) $(this).hide(); else $(this).show(); }); } else { $("#test1").DataTable({ destroy: true }); } }

I checked it several times and it seems to run flawlessly but the whole thing is a little laggy for me. Probably not the best way of implementing that feature but the best thing I could come up with.

Check the fiddle to see it in action: jsfiddle . Hope this helps you out. If you got any further questions, feel free to ask them!