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

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

MartyFMartyF Posts: 14Questions: 5Answers: 1

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 ?

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited July 2017

    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

  • MartyFMartyF Posts: 14Questions: 5Answers: 1
    edited July 2017

    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
            };
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • MartyFMartyF Posts: 14Questions: 5Answers: 1

    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...

  • MartyFMartyF Posts: 14Questions: 5Answers: 1
    edited July 2017

    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...

  • MartyFMartyF Posts: 14Questions: 5Answers: 1
    edited July 2017

    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 ?

  • panecpanec Posts: 2Questions: 0Answers: 0
    edited September 2017

    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

  • panecpanec Posts: 2Questions: 0Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • elar1000elar1000 Posts: 3Questions: 0Answers: 0

    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;
                }
            },
    
  • elar1000elar1000 Posts: 3Questions: 0Answers: 0

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

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

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

    Allan

This discussion has been closed.