Pager ajaxProcessing outputting rows in object order, not based on key name.

[JamoCA]

I'm using TableSorter 2.19.1 as of 2/11/2015. I'm attempting to use the pager function w/ajax like the example posted at:

https://mottie.github.io/tablesorter/docs/example-pager-ajax.html

I don't have any control over the "row" object sort order unless I manually generate the JSON as string. It's as if the name/pair values weren't being used.. If each value is named, it shouldn't have to be in the same order. What I'm finding is that the table is being updated with the object key order in each row instead of using the keys.

In other words, these 2 objects will output differently from one another even though the name/value pairs contain the same data but are only outputted in a different order:

{
    "ID": 1,
    "Name": "Kabul",
    "CountryCode": "AFG",
    "District": "Kabol",
    "Population": 1780000
}

{
    "Name": "Kabul",
    "CountryCode": "AFG",
    "ID": 1,
    "Population": 1780000
    "District": "Kabol",
}

The sample code should be updated to loop over the column names, determine if a named value exists in the row object and then add it to the array in that order instead of just looping through available object items. In the case that an item doesn't exist, add an empty cell.

[JamoCA]

I noticed something in the source code that's missing in the sample HTML code. The pager TD in the THEAD that has the class of "pager" also needs "sorter-false". If this is omitted, clicking any of the pager buttons will toggle a resort refresh of all columns.

[Mottie]

Hi @JamoCA!

Hmm, yeah. I only included a very basic example of how to use the ajaxProcessing option. You are correct - as it is now, it won't work with JSON that is unordered. The other issue that comes up is what order do you want it in? The values within the data.headers do not match the row "key" ( CountryCode will not match the header name "Country Code" without something extra.

I'll go ahead and update the demo, but really that part of the code is completely custom and up to the developer.

[JamoCA]

I've ensured that the JSON keys are identical to the header values. Here's what I wrote to iterate over the header column array & compensate for keys that may not exist in the returned JSON. ("undefined" keys are still assigned to a cell in the row, but empty values don't have to be returned in the JSON. This should result in a smaller JSON file.):

$.each(headers, function(i, c) {
    v = '';
    if ( $.ListFind("string,number,boolean",typeof(d[r][c])) ){
        v =  d[r][c].toString();
    }
    row.push(v);
});

Please let me know if there are any unintended consequences as a result to this approach.

Regarding the sample HTML, please add ".sorter-false" to "thead tr td.pager" as it is in the source code of the page. (I omitted it initially & couldn't immediately figure out why all column sorts were being toggled whenever I clicked a pager button.) Thanks!

[Mottie]

I already fixed the sorter-false in the update; it is only available within the working branch at the moment, so the actual demo page (gh-pages branch) isn't updated.

The code within the ajaxProcessing function was also updated to use the json headers values as a cross-reference (the "County Code" header just needed the space removed to match the row key). You could just as easily have included a key-to-header cross reference within the json to maintain column data.

As I said, pretty much everything within the ajaxProcessing function and the returned json is customizable. The pager ajax demo is but one simple example; but it is now fixed and will maintain column order.