Client-side table sorting

[Dustkicker]

I wrote a function to perform sorting of the table locally instead of
making a trip to the server each time. It uses the ".sorted" class to
determine which column needs sorting, thus only the table selector is
passed along with the sort order. At this stage it supports alphabetic
and (slightly crude) numeric sorting. I hope this helps someone.
Suggestions welcome.

Here is the function:
========================================
function sortGrid(table, order) {
// Remove all characters in c from s.
var stripChar = function(s, c) {
var r = "";
for(var i = 0; i < s.length; i++) {
r += c.indexOf(s.charAt(i))>=0 ? "" : s.charAt(i);
}
return r;
}

// Test for characters accepted in numeric values.
var isNumeric = function(s) {
var valid = "0123456789.,- ";
var result = true;
var c;
for(var i = 0; i < s.length && result; i++) {
c= s.charAt(i);
if(valid.indexOf(c) <= -1) {
result = false;
}
}
return result;
}

// Sort table rows.
var asc = order == "asc";
var rows = $(table).find("tbody > tr").get();
var column = $(table).parent(".bDiv").siblings(".hDiv").find
("table tr th").index($("th.sorted", ".flexigrid:has(" + table +
")"));
rows.sort(function(a, b) {
var keyA = $(asc? a : b).children("td").eq(column).text
().toUpperCase();
var keyB = $(asc? b : a).children("td").eq(column).text
().toUpperCase();
if((isNumeric(keyA)||keyA.length<1) && (isNumeric(keyB)||
keyB.length<1)) {
keyA = stripChar(keyA,", ");
keyB = stripChar(keyB,", ");
if(keyA.length < 1) keyA = 0;
if(keyB.length < 1) keyB = 0;
keyA = new Number(parseFloat(keyA));
keyB = new Number(parseFloat(keyB));
}
return keyA>keyB ? 1 : keyA<keyB ? -1 : 0;
});

// Rebuild the table body.
$.each(rows, function(index, row) {
$(table).children("tbody").append(row);
});

// Fix styles
$(table).find("tr").removeClass("erow"); // Clear the striping.
$(table).find("tr:odd").addClass("erow"); // Add striping to odd
numbered rows.
$(table).find("td.sorted").removeClass("sorted"); // Clear sorted
class from table cells.
$(table).find("tr").each( function(){
$(this).find("td:nth(" + column + ")").addClass("sorted"); //
Add sorted class to sorted column cells.
});
}
========================================

To use it, setup flexigrid and override the onChangeSort function e.g.

$("#table").flexigrid({
...
onChangeSort: function(name, order) {
sortGrid("#table", order);
}
...
});

Regards,
Kobus

[CK4]

Great! This is what I need! I will have a try later.
thx!

[par...@gmail.com]

Hi
Does Flexigrid's own sorting works?
I have a table with 3 columns, dates, user names, messages and when I
change the sorting on any column, nothing happens and there is no
reordering of the columns.
Thanks
Parimah

[Kobus Pretorius]

Flexigrid's sorting doesn't do any actual sorting. It simply sends a request to your server telling it to return the data in a sorted order. Have a look at the examples on http://www.flexigrid.info/.

[Parimah Mehrrostami]

Thanks 

Parimah

[Jthomas]

Anyone else try this out yet? We used tablesorter to do client-side
sorting on our flexigrids.

On Mar 24, 2:00 pm, Parimah Mehrrostami <pari...@gmail.com> wrote:
> Thanks Parimah
>
>
>
> On Tue, Mar 24, 2009 at 11:33 AM, Kobus Pretorius <kob...@gmail.com> wrote:
> > Flexigrid's sorting doesn't do any actual sorting. It simply sends a
> > request to your server telling it to return the data in a sorted order. Have

> > a look at the examples onhttp://www.flexigrid.info/.

[Kobus Pretorius]

We also used Tablesorter and it was great, except it didn't allow a scrollable tbody or resizable columns or any of the other fantastic features of Flexigrid. My custom client-side sorting function works on the same principle as Tablesorter, but it isn't as fancy and performance isn't great, but it's reasonable and it works in all the browsers I've tested it in. I would welcome anyone to contribute an improvement.

Regards,
Kobus

[Parimah Mehrrostami]

Kobus

Thanks I am using it and it works fine.

[Kobus Pretorius]

Hi Parimah, I am delighted to hear that.

Regards