jQWidgets Forums

jQuery UI Widgets Forums Grid Can't get custom sort to work with json data

This topic contains 3 replies, has 2 voices, and was last updated by  joekincognito 9 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • joekincognito
    Participant

    In the example here is what’s shown:

    $(document).ready(function () {
    // prepare the data
    var data = generatedata(100);

    var customsortfunc = function (column, direction) {
    var sortdata = new Array();

    if (direction == ‘ascending’) direction = true;
    if (direction == ‘descending’) direction = false;

    if (direction != null) {
    for (i = 0; i < data.length; i++) {
    sortdata.push(data[i]);
    }
    }
    else sortdata = data;
    ……. etc etc

    So you can see in those last few lines the custom sort function hinges on the data var. In the example the data is generated from a script. I don’t know how to set the data variable since I am using json data. I tried setting the data variable to $(“#jqxgrid”).jqxGrid(‘source’).loadedData but when I do that, it only sorts the first row and when I check value1 in the compare function:
    var compare = function (value1, value2) {
    value1 = String(value1.innerHTML).toLowerCase();
    console.log(value1);
    It is always undefined.
    The column I am trying to sort is anchor tag with a number in the middle and i need to sort by the number (ex. <a href="form/3">1200</a>)


    ivailo
    Participant

    Hi joekincognito,

    Look at this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serversorting.htm?arctic. It shows how to implement Server Sorting.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    joekincognito
    Participant

    I don’t want to do the sorting on the server. What other options do I have. Should I just Ajax my JSON data first and process it as local data so I can do my custom sorting client side?


    joekincognito
    Participant

    I got it to work. It was a simple solution. Setting data = $(“#jqxgrid”).jqxGrid(‘source’).loadedData in the first line of the custom sort function works fine. The issue was value1 = String(value1.innerHTML).toLowerCase(); doesn’t work. value1 is not a dom element. Here is what I did instead:

    value1 = String(value1).toLowerCase();
            value1= value1.substring(value1.indexOf('">')+2,value1.indexOf('</'));

    Here is my full custom sort script, for anybody trying to do a custom sort on a JSON datasource without going back to the server:

            var customsortfunc = function (column, direction) {
            data=$("#jqxgrid").jqxGrid('source').loadedData;
            var sortdata = new Array();
            if (direction == 'ascending') direction = true;
                    if (direction == 'descending') direction = false;
    
                    if (direction != null) {
                        for (i = 0; i < data.length; i++) {
                            sortdata.push(data[i]);
                        }
                    }
                    else sortdata = data;
            var tmpToString = Object.prototype.toString;
            Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] };
            if (direction != null) {
                sortdata.sort(compare);
                if (!direction) {
                    sortdata.reverse();
                }
            }
            source.localdata = sortdata;
            $("#jqxgrid").jqxGrid('databind', source);
            Object.prototype.toString = tmpToString;
        }
        var compare = function (value1, value2) {
            //value1 = String(value1.innerHTML).toLowerCase();
            value1 = String(value1).toLowerCase();
            value1= value1.substring(value1.indexOf('">')+2,value1.indexOf('</'));
            value2 = String(value2).toLowerCase();
            value2 = value2.substring(value2.indexOf('">')+2,value2.indexOf('</'));
            try {
                var tmpvalue1 = parseFloat(value1);
                if (isNaN(tmpvalue1)) {
                    if (value1 < value2) { return -1; }
                    if (value1 > value2) { return 1; }
                }
                else {
                    var tmpvalue2 = parseFloat(value2);
                    if (tmpvalue1 < tmpvalue2) { return -1; }
                    if (tmpvalue1 > tmpvalue2) { return 1; }
                }
            }
            catch (error) {
                var er = error;
            }
            return 0;
        };
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.