How to get recordsTotal from response header

amir manian

Hi!
I'm using ajax request to fill dataTable. The API returns totalcount in "Response header" (I can't change the api).How can I reach response header to get totalcount in ajax call

$('#' + tableId).DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: myUrl,
                data: function (d) {
                    var pageIndex = d.start / d.length;
                    var pageSize = d.length;
                    var sortCol = columns[d.order[0].column].data; // Get column name from column index
                    var sort = sortCol + ',' + d.order[0].dir; // API sort format : "colName,direction"
                    var searchValue = d.search.value;
                    return $.extend({}, "", {
                        "page": pageIndex,
                        "size": pageSize,
                        "sort": sort,
                        "search": searchValue
                    });
                },
                async: false,
                type: 'GET',
                headers: {
                    'Authorization': authorization
                },
                dataFilter: function (data) { // Rename json props to satisfy datatable expectations.
                    var json = {};
                    json.recordsTotal = 26; // **responseHeader.total**
                    json.recordsFiltered = 26; // **responseHeader.total**
                    json.data = jQuery.parseJSON(data); // data.result
                    return JSON.stringify(json); // return JSON string
                },

amir manian

The xhr.dt event worked for me. don't forget to use async: true on your ajax.

$('#' + tableId)
        .on('xhr.dt', function (e, settings, json, xhr) {
            json.recordsTotal = json.recordsFiltered = xhr.getResponseHeader('count header name here');
            // Note no return - manipulate the data directly in the JSON object.
        })
        .DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: baseApiUrl + relativeUrl,
                async: true,
               ...
            }

kwhat4

I had a nearly identical question, however, I needed to convert the json reference from an Array to an Object which turned out to be far more challenging that I expected. I finally figured out that settings contains a property to json that you can set a new reference to. Hopefully this can save someone else several hours.

.on("xhr.dt", function (e, settings, json, xhr) {
    settings.json = {
        data: json
    };

    settings.json.recordsTotal = settings.json.recordsFiltered = xhr.getResponseHeader("X-Records-Total");

})

kwhat4

Well, my solution does not work as "dataSrc": function (json) still contains the old data. This has got to be the most autistic API I have ever seen... There really is no good way to change the results based on a header, there is no way to get headers where you reasonably can change the json data. Furthermore, why does 'this' not return the datatable from the callback context? Why can I not reasonably access the dataTable from a callback? I am not sure how you have so many callbacks that are completely useless.

kthorngren

The solution presented by @amir manian looks like it would work. I'm not sure I understand why you are manipulating the settings parameter. Manipulating the json parameter seems to work. It works in this example:

http://live.datatables.net/koyalulo/1/edit

Kevin

kthorngren

@kwhat4, Not sure if you saw my response to your question. Did notice you mentioned working with this in another thread. So just wanted to make sure you knew there was a response.

Kevin