SearchPanes stya empty with serverside skripting

fwtag

Due to oerformance issues relkatied to growing data bases, I am switching DataTables to serverside skripting.

This works fine despite the fact, that the searchpanes keep staying empty ... at least with some fake data which should lead to at least on filled Pane (this worked with clientsied data processing, hence it seems not to has something to do with the threshold setting).

The (shortened) setup is as follows:

    let table = $('#orders-datatable').DataTable({
        serverSide: true,
        searching: true,
        select: true,
        ajax: {
            url: <api endpoint>
            cache: false,
            type: 'GET',
        },
        rowCallback: function (row) {
            $(row).addClass('clickable-row')
        },
        columns: [
            /* Column 0 - Status */
            {
                name: 'status',
                title: fieldmapper['order']['status']['label'],
                className: 'text-center text-nowrap',
                searchable: false,
                orderable: true,
                data: function (row: any, type: any, set: any) {
                    if (type === 'set') {
                        row.status = set
                    } else if (type === 'display' || type === 'filter' || type === 'sort') {
                        return constants['order']['status'][row.status][type]
                    }
                    return row.status
                },
                render: function (_data: any, type: any, row: any) {
                    if (type === 'display') {
                        return `<span class = "badge rounded-pill ${constants['order']['status'][row.status]['classNames']}">${constants['order']['status'][row.status]['display']}</span>`;
                    } else if (type === 'filter' || type === 'sort') {
                        return constants['order']['status'][row.status][type]
                    }

                    return ''
                },
            },
            /* Column 1 - Bestellnummer */
            {
                ...
            },
            /* Column 2 - Typ */
            {
                ...
            },
            /* Column 3 - Datum */
            {
                ...
            },
            /* Column 4 - Magazin */
            {
               ...
            },
            /* Column 5 - Ausgaben */
            {
                ...
            },
            /* Column 6 - Kunde */
            {
                ...
            },
            /* Column 7 - Anzeigentyp */
            {
                ...
            },
            /* Column 8 - Chiffre */
            {
                ...
            },
            /* Column 9 - Preview */
            {
                ...
            },
            /* Column 10 - Aktionen */
            {
                ...
        ],
        order: [
            [1, 'asc'],
            [2, 'asc']
        ],
        layout: {
            topStart: 'searchPanes'
        },
        searchPanes: {
            i18n: {
                clearMessage: 'Alle Filter löschen',
                collapse: {
                    0: 'Filter',
                    1: 'Filter (1 ausgewählt)',
                    _: 'Filter (%d)'
                },
                collapseMessage: 'Filter ausblenden',
                emptyPanes: 'Keine Filter verfügbar',
                loadMessage: '<span class="spinner-border spinner-border-sm text-secondary me-2" role="status"></span>Filtere Daten ...',
                showMessage: 'Filter einblenden',

                title: {
                    _: '%d Filter angewendet',
                    0: 'Keine Filter angewendet',
                    1: 'Ein Filter angewendet'

                }
            }
        },
        columnDefs: [
            {
                searchPanes: {
                    show: true
                },
                targets: [0,2,4,6]
            },
            {
                searchPanes: {
                    show: false
                },
                targets: [1,3,5,7,8,9,10]
            }
        ]
    });

The response payload (json) for the first page looks like this (shortened);

{
  "draw" : "1",
  "recordsTotal" : 106,
  "recordsFiltered" : 106,
  "data" : [ {
    "uuid" : "4120cb5f-0765-598c-b715-e42125dc228f",
    "enabled" : true,
    "label" : "__label_01b94ec5a476b8ffaa2d18a4a42fcffa",
    "title" : "__title_01b94ec5a476b8ffaa2d18a4a42fcffa",
    "order_number" : "1000020",
    "status" : "new",
    "date" : "2025-03-26",
    "workflow_step" : 0,
    ...
  } ],
  // fixture for testing/debugging purposes
  "searchPanes" : {
    "options" : {
      "status" : [ {
        "label" : "Vorläufig",
        "value" : "preliminary",
        "total" : 21,
        "count" : 2
      }, {
        "label" : "Neu",
        "value" : "new",
        "total" : 21,
        "count" : 2
      }, {
        "label" : "Prüfung",
        "value" : "evaluation",
        "total" : 21,
        "count" : 3
      }, {
        "label" : "Freigabe",
        "value" : "approved",
        "total" : 21,
        "count" : 1
      }, {
        "label" : "Abgelehnt",
        "value" : "declined",
        "total" : 21,
        "count" : 12
      }, {
        "label" : "Archiviert",
        "value" : "archived",
        "total" : 21,
        "count" : 5
      }, {
        "label" : "Exportiert",
        "value" : "exported",
        "total" : 21,
        "count" : 4
      } ]
    }
  }
}

BTW, for some reason, in this scenario, the api endpoint is called twice with identical request but with draw=1 and draw=2.

fwtag

(sry for the bad syntax, my language processor seems to be a bit buggy :-) )

kthorngren

Possibly the issue is you have searchable: false, set for the status column. The JSON response snippet looks correct. Try removing the columns.searchable option from the status column.

Kevin

fwtag

@kthorngren Unfortunately, both, setting searchable: true and removing the option did not change anything. The searchPane stays empty.

kthorngren

You have this for the status column:

        {
            name: 'status',
            title: fieldmapper['order']['status']['label'],
            className: 'text-center text-nowrap',
            searchable: false,
            orderable: true,
            data: function (row: any, type: any, set: any) {
                if (type === 'set') {
                    row.status = set
                } else if (type === 'display' || type === 'filter' || type === 'sort') {
                    return constants['order']['status'][row.status][type]
                }
                return row.status
            },
            render: function (_data: any, type: any, row: any) {
                if (type === 'display') {
                    return `<span class = "badge rounded-pill ${constants['order']['status'][row.status]['classNames']}">${constants['order']['status'][row.status]['display']}</span>`;
                } else if (type === 'filter' || type === 'sort') {
                    return constants['order']['status'][row.status][type]
                }
 
                return ''
            },
        },

You are using columns.data as a function. I'm not sure what you are trying to do in that function.

You are returning this in the ajax response:

  "searchPanes" : {
    "options" : {
      "status" : [ {
....
      } ]
    }
  }

I don't think this is applying the data to the name: 'status', column. Try changing the columns.data from a function to data: 'status,`.

Kevin

fwtag

Ka chow! That fixes it:

Actually I do not remember anymore why the design decission was like that. I will fix it.

One more question:
Since I only need 4 fields to be handled in SearchPanes, does DataTables send the information stored in columnDefs[] somewhere in the request? Actually I do not find these information.

allan

does DataTables send the information stored in columnDefs[] somewhere in the request?

Part of it. See this page in the manual for the information that the server-side processing request contains. It includes the name, data, searchable and orderable options.

Allan