jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Can't get custom sort to work with json data
Tagged: josn data, jqxgrid, load, server sorting
This topic contains 3 replies, has 2 voices, and was last updated by joekincognito 9 years, 9 months ago.
-
Author
-
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 etcSo 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>
)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 IvanovjQWidgets Team
http://www.jqwidgets.comI 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?
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; };
-
AuthorPosts
You must be logged in to reply to this topic.