Server-side, total pages and number of rows not shown

MartyF

Hi,

I am sending back a response to my DT but the information in the footer of the table is not updating. Here is what I'm sending back :

{
    recordsTotal: 2,
    recordsFiltered: 2,
    draw: 1,
    data: Array[2]
}

The rows are displayed in the table, and I can reorder, filter, every inteaction works well. But I cannot use pagination, as it seems DT doesn't receive the recordsFiltered and recordsTotal values. :

(filtered from NaN items)

Of course the number of pages shown is incorrect and the navigation buttons don't work.

Here is the debug of my DT : http://debug.datatables.net/onezas

What did I miss ?

kthorngren

The debugger shows this has the JSON response:

{
    "recherche": {
        "nomEnveloppe": "",
......
        "direction": "ASC"
    },
    "totalPages": 1,
    "pageActive": 1,
    "nombreResultat": 20,
    "nombreTotalResultat": 2,
    "enveloppes": [{
        "idEnveloppe": 429,
.....

        },
        "dateModification": "2017-07-20"
    }],
    "draw": 1
}

It looks like 'recordsTotal, recordsFiltered and data` are named something different in the JSON response.

My understanding is ajax.dataSrc is not used when using server side processing.

Kevin

MartyF

Thanks for your answer Kevin ! The data is processed correctly in dataSrc, and the result is the JSON I posted in my question. This is why it seems strange to me that it doesn't work

Here is what the formatEnveloppesResults function returns :

        return {
            recordsTotal: data.nombreTotalResultat,
            recordsFiltered: data.nombreTotalResultat,
            draw: dtDraw,
            data: lignes
        };

kthorngren

Allan mentions in this thread that ajax.dataSrc is not supported for use with server side processing:
https://datatables.net/forums/discussion/comment/115018/#Comment_115018

Kevin

MartyF

I hadn't seen this topic before... Then how do I edit the received data from the server ? I can't change what I'm receiving this is why I need to transform it into DT-friendly data...

MartyF

Ok so I removed the ajax.dataSrc and used xhr.dt instead, returning what I think DT is waiting for :

{
    recordsTotal: 20,
    recordsFiltered: 20,
    draw: 1,
    data: Array[20]
}

Here is the event :

$('.dataTable')
          .on('xhr.dt', function ( e, settings, json, xhr ) {
              const formattedResult = formatEnveloppesResults(json);

              json = formattedResult;
              dtDraw += 1;
          });

But by using breakpoints I can see that, though xhr.dt is fired before _fnAjaxUpdateDraw, the latest uses the original json object...

MartyF

I am completely lost... in the doc, it is written that ajax.dataSrc is used to convert data received from the server to a format DT can read :

As a function dataSrc provides the ability to manipulate the data returned from the server >from one form into another. For example, if your data is split over multiple arrays you might >combine it into a single array to return for processing and display by DataTables.

In this form dataSrc can be used to transform any data source, such as non-JSON data >(XML, YAML, etc) into the Javascript array that DataTables expects.

So why can't I use it ? And if I can, why doesn't it work, is this a bug ?

panec

I have the same issue. I tried to convert the JSON data from one form (not DT complaint) to another one that should work, but no mater how hard I tried the JSON data was always unchanged.
I tried modifying JSON in xhr & xhr.dt event as well as on ajax.dataSrc. My version is 1.10.15

panec

I have tried again with minimal setup and ad the moment the ajax.dataSrc way is working fine. The xhr event approach still does not work.

allan

Sorry I never saw your post before @MartyF. You can't use ajax.dataSrc with server-side processing because it points to the data array that DataTables should use for the rows in the table. But server-side processing responses need more information than that - they need the draw count and totals.

Using xhr is the correct way to do it, but you need to manipulate the existing object. You can't assign a new one to it.

$('.dataTable')
          .on('xhr.dt', function ( e, settings, json, xhr ) {
              const formattedResult = formatEnveloppesResults(json);
 
              json = formattedResult;
              dtDraw += 1;
          });

Won't work because it changes the value of json in the current scope, but it doesn't effect the original object.

You need to modify that original json object - e.g.

$('.dataTable')
          .on('xhr.dt', function ( e, settings, json, xhr ) {
              json.recordsTotal = json.nombreTotalResultat;
              ...
          });

Yes, I'll freely admit this is a bit pants. The next major version of DataTables will provide a bit more functionality in this area.

Allan

elar1000

Hello

Can we just use dataSrc as following with server side processing if we need to manipulate dom after ajax call? Strange thing is with that footer is not always updating

"ajax": {
            "url" : "@{Activities.list_for_campaign_data_tables_JSON()}",
            "data": function (requestData) {
                $("input[type=text].filter, input.filter:checked, select.filter").each(function(){
                    var v = $(this).val();
                    if ($.isArray(v)) {
                        requestData[this.name] = v;                 
                    }else{
                        requestData[this.name] = (requestData[this.name] || []);
                        requestData[this.name].push(v);
                    }
                });
            },
            "dataSrc": function(json){
                this.api();
                var currency = $("#currency option:selected").text();
                var pageTotal = $(".dataTable tfoot tr.page-total");
                var total = $(".dataTable tfoot tr.total");
                if(json.totalData.hasOwnProperty("pageTotal") ){
                    pageTotal.show();
                    pageTotal.find("th")[8].innerHTML = json.totalData.pageCount; 
                    pageTotal.find("th")[9].innerHTML = json.totalData.pageTotal + " " + currency; 
                } else { 
                    pageTotal.hide();
                    pageTotal.find("th")[8].innerHTML = json.totalData.count; 
                    pageTotal.find("th")[9].innerHTML = json.totalData.total + " " + currency; 
                }

                total.find("th")[8].innerHTML = json.totalData.count ; 
                total.find("th")[9].innerHTML = json.totalData.total + " " + currency ; 

                return json.data;
            }
        },

elar1000

Got footer updating working with DataTable.api
oTable is global variable for dataTable

var pageTotal = $(oTable.DataTable().table().footer()).find("tr.page-total");

allan

You can't use ajax.dataSrc with server-side processing.

Good to hear you've got the footer updating though.

Allan