How to check if ColumnControl (serverSide enabled) contains any filter?

witold.gren@gmail.com

Hi everyone.

I have a little problem understanding how ColumnControl works with serverSide enabled. I try to check if any search on any column was used or if any selectList was activated. If active, it unlocks the button that allows you to delete all filters.

datatable = $('#datatable').DataTable({
  ...
  ajax: {
    url: 'DATATABLES_URL',
    type: 'GET',
    error: function (xhr, error, code) {
      alert(xhr.responseText);
    }
  },
  serverSide: true,
  ...
  columnControl: [
    {
      target: 0,
      content: [
        'order',
        {
          extend: 'dropdown',
          icon: 'menu',
          content: [
            {extend: 'orderAsc'},
            {extend: 'orderDesc'},
            {extend: 'orderRemove'},
            {extend: 'orderClear'},
            {extend: 'orderAddAsc'},
            {extend: 'orderAddDesc'},
            {extend: 'spacer'},
            {extend: 'searchList'},
          ]
        }
      ]
    },
    {
      target: 1,
      content: ['search']
    }
  ],
  ...
});

function updateResetButtonState() {
  const globalSearch = datatable.search(); // <- check global search, it works properly
  const columnSearches = datatable.columns().data().toArray().map((_, i) => datatable.column(i).search()); // <- check column search, it doesn't works
  const hasSearch = globalSearch.length > 0 || columnSearches.some(s => s.length > 0);
  $('#resetSearchBtn').toggleClass('disabled', !hasSearch);
};

datatable.on('search.dt', function (e, settings) {
   updateResetButtonState();
});

document.getElementById('ccSearchClear').addEventListener('click', function () {
  datatable.search('').columns().search('');
  datatable.draw(true);
});

Unfortunately, trying to check whether a column contains a search does not work. A similar situation applies to checking whether a searchList has been selected. Is there any simple way to check this? I think it's worth adding that I'm using the latest version of DataTables (2.3.6) and the ColumnControl (1.2.0).

PS. I also tried to do this by checking what parameters were sent via AJAX, but unfortunately it didn't work either.

datatable.on('preXhr.dt', function (e, settings, data) {
  console.log(JSON.stringify(data));
});

kthorngren

The ColumnControl extension doesn't use column().search() so you won't be able to use that API to fetch the ColumnControl searches.

Allan explains the preXhr fires before the ColumnControl parameters are added to the ajax request so that won't work either.

The only thing I can think of is to use the state() API to query what Datatables saves. You don't need to enable stateSave for this. Try any of the ColumnControl examples and open the console. Use the following command to get the current state:

$('#example').DataTable().state();

You will find a columnControl object in the saved state. You may need to performa search first. For example:

I performed a search in the Position column of this example.

You may need to use the xhr event to check this when using server side processing.

Kevin

kthorngren

Also you may want to refer to this thread and the thread it links to which I believe shows how to programmatically change the select lists to clear them.

Kevin