ColumnControl: Search icon not activated with Server Side processing

Wernfried

I use a datatable with ColumnControl and serverSide: true.

Problem is, the search icon does not change when search ist used. Also the ccSearchClear button remains disabled.

Does anybody know a solution?
When I set serverSide: false, then it is working fine but that's not an option for me.

Here is my config:

$("#dataTable").DataTable({
  columns: [
     { name: 'owner', data: 'owner', title: 'Originator', columnControl: ["order", ['searchClear', { extend: 'search' }]] }
  ],
  columnControl: ["order", ['searchClear', "search"]],
  order: [
     { name: 'sort', dir: 'asc' },
     { name: 'status', dir: 'asc' },
     { name: 'id', dir: 'desc' }
  ],
  layout: {
     topStart: { buttons: [ { extend: "colvis" }, "ccSearchClear" ] },
     topEnd: "search",
     bottomStart: { buttons: ["copy", "excel", "pdf", 'csv', "print"] },
     bottomEnd: null
  },
  ajax: {
     url: ...
  },
  serverSide: true,
  fixedHeader: true,
  deferRender: true,
  responsive: true
})

<link rel="stylesheet" href="/bulma/bulma.min.css"/>
<link rel="stylesheet" href="/stylesheets/datatables.min.css"/>
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/bulma.js"> </script>
<script type="text/javascript" src="/luxon/luxon.min.js"></script>
<script type="text/javascript" src="/javascripts/lib/datatables.min.js"></script>
<script type="text/javascript" src="/pdfmake/pdfmake.min.js"></script>
<script type="text/javascript" src="/pdfmake/vfs_fonts.js"></script>
<script type="module" src="/javascripts/index.js"></script>

I think, it should be easy to reproduce the issue, otherwise let me to to provide more information.
I tested it on Firefox and Edge, Windows 11 and I am using the Bulma styling.

The greatest solution would be to have dedicated icons for active and inactive search, similar to the order icons. As far as I see from code, it always use the DataTable.ColumnControl.icons.menu icon and actually it is hardly possible to visually distinct whether the search is active or not.

Kind Regards

allan

Have a look at this thread. There is an error in the current release that means dtcc-button_active isn't correctly applied when server-side processing is enabled. The nightly build has the fix and I'll look at tagging the release soon.

Allan

Wernfried

I tried the nightly build. It fixes the inactive icon, however the "Clear search" button still remains disabled.

Until you will provide a fix for it, I will use this workaround:

$("#dataTable").DataTable({
   ...
}).on('draw', function () {
   $('.dt-buttons').find('span:contains("Clear search")').parent().removeClass('is-disabled').removeAttr('disabled');
});

Having the "Clear search" button always enabled is still better...

Wernfried

allan

Thank you. I'll get that sorted out in time for the release.

Allan

Wernfried

Once you touch the code, I would propose also the change below. For some columns operators like "Empty", "Not empty" or "Does not equal" do not make any sense and you may want to suppress them. Seems to require only minor changes in the code:

var searchDateTime = {
    defaults: {
        clear: true,
        format: '',
        mask: '',
        placeholder: '',
        title: '',
        titleAttr: '',
        filterLogic: []
    },
    init: function (config) {
      ...
            .options([
            { label: dt.i18n(i18nBase + 'equal', 'Equals'), value: 'equal' },
            { label: dt.i18n(i18nBase + 'notEqual', 'Does not equal'), value: 'notEqual' },
            { label: dt.i18n(i18nBase + 'greater', 'After'), value: 'greater' },
            { label: dt.i18n(i18nBase + 'less', 'Before'), value: 'less' },
            { label: dt.i18n(i18nBase + 'empty', 'Empty'), value: 'empty' },
            { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
        ].filter(x => !config.filterLogic.includes(x.value)))




var searchNumber = {
    defaults: {
        clear: true,
        placeholder: '',
        title: '',
        titleAttr: '',
        filterLogic: []
    },
    init: function (config) {
      ...
            .options([
            { label: dt.i18n(i18nBase + 'equal', 'Equals'), value: 'equal' },
            { label: dt.i18n(i18nBase + 'notEqual', 'Does not equal'), value: 'notEqual' },
            { label: dt.i18n(i18nBase + 'greater', 'Greater than'), value: 'greater' },
            {
                label: dt.i18n(i18nBase + 'greaterOrEqual', 'Greater or equal'),
                value: 'greaterOrEqual'
            },
            { label: dt.i18n(i18nBase + 'less', 'Less than'), value: 'less' },
            { label: dt.i18n(i18nBase + 'lessOrEqual', 'Less or equal'), value: 'lessOrEqual' },
            { label: dt.i18n(i18nBase + 'empty', 'Empty'), value: 'empty' },
            { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
        ].filter(x => !config.filterLogic.includes(x.value)))




var searchText = {
    defaults: {
        clear: true,
        placeholder: '',
        title: '',
        titleAttr: '',
        filterLogic: []
    },
    init: function (config) {
      ...
            .options([
            { label: dt.i18n(i18nBase + 'contains', 'Contains'), value: 'contains' },
            {
                label: dt.i18n(i18nBase + 'notContains', 'Does not contain'),
                value: 'notContains'
            },
            { label: dt.i18n(i18nBase + 'equal', 'Equals'), value: 'equal' },
            { label: dt.i18n(i18nBase + 'notEqual', 'Does not equal'), value: 'notEqual' },
            { label: dt.i18n(i18nBase + 'starts', 'Starts'), value: 'starts' },
            { label: dt.i18n(i18nBase + 'ends', 'Ends'), value: 'ends' },
            { label: dt.i18n(i18nBase + 'empty', 'Empty'), value: 'empty' },
            { label: dt.i18n(i18nBase + 'notEmpty', 'Not empty'), value: 'notEmpty' }
        ].filter(x => !config.filterLogic.includes(x.value)))

Documentation in https://datatables.net/reference/content/search may look like this:

filterLogic

Type: array
Default: []

A list of search operators which are not available in search dropdown. For example, if your column holds a primary key, then empty and notEmpty operator do not make much sense and you may wish to hide them. Not relevant for searchList.

And you may add the list of available operators:

searchText: contains, notContains, equal, notEqual, starts, ends, empty, notEmpty
searchNumber: equal, notEqual, greater, greaterOrEqual, less, lessOrEqual, empty, notEmpty
searchDateTime: equal, notEqual, greater, less, empty, notEmpty

Best Regards
Wernfried