Flexigrid jQuery plugin: extending to allow sorting of static grids
Flexigrid is a nice lightweight jQuery plugin that turns tables into sortable, searchable, data-driven grids. It’s all ajaxed up to the hilt, like every other jQuery plugin, but it can also create a quick nice-looking grid from a plain ol’ HTML table.
Out of the box, though, its column sorting feature does not work unless your grid is hooked up to a server-side data source. Here is a svn patch that adds this functionality to the current head branch of flexigrid.js:
This patch is built on the current trunk revision of flexigrid.js, which is r3. I am currently unable to create a patch for the current release version (“1.0b3″), which is slightly different; but to apply these changes to that version is pretty simple, since I only made 3 changes:
- add “sortorder: ‘asc’” to the default properties struct up at the top
- add the “else if (!p.url) this.inPlaceSort();” clause to the end of the changeSort method
- copy in the inPlaceSort() function
Hi,
Thank you for your patch, it’s what I was looking for.
Here’s your code updated with my changes. I’ve added a parameter to ‘inPlaceSort’, so I can use the ‘axis’ attribute, and I’ve put the “if (p.sortorder==’asc’)” test outside the “rows.sort” callback :
…
else if (!p.url) this.inPlaceSort(th);
…
inPlaceSort: function(th) {
if (!p.sortorder) p.sortorder=’asc’;
var col = $(th).attr(‘axis’).substr(3);
var rows = $(this.bDiv).find(‘tr’);
if ((!rows) || (rows.length < 2)) return true;
var parent = $(rows[0]).parent();
// Hat tip http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
// This comparator could be a lot more sophisticated. How about adding
// a property of the column model that says if the data is numeric or textual,
// then sorting based on that? TODO: yeah.
var orderby = -1;
if (p.sortorder=='asc') orderby = 1;
rows.sort(function(a, b) {
var compA = $(a).find("td:eq("+col+")").text();
var compB = $(b).find("td:eq("+col+")").text();
return (compA compB) ? -orderby : 0;
});
$.each(rows, function() {
$(parent).append(this);
});
},
Has anyone got an example of using this patched code. I have updated the script but can’t get it to work.
thanks.
Russell,
The patched version of flexigrid should work just like the original flexigrid. Lets say your page has a table with id myTbl, with just the table contents, no header row; you could turn it into a flexigrid with some JS code like:
[code]
$("#myTbl").flexigrid({
colModel : [
{display: 'Column A', name : 'columnA', width : 150, sortable : true, align: 'left'},
{display: 'Column B', name : 'columnB', width : 150, sortable : true, align: 'left'},
{display: 'Column C', name : 'columnC', width : 100, sortable : false, align: 'left'}
],
sortname: "",
sortorder: "asc",
usepager: false,
title: 'My Table Title',
useRp: false,
showTableToggleBtn: true,
width: 'auto',
height: 'auto'
});
[/code]
That’d be for a table with 3 columns, where the first two columns can be used for sorting. The idea is that the static contents of the grid should be sortable, without connecting it up to an ajax data source.
Thanks nick…..
but i tried with example…..and it was not allow to sort the rows……..but the css was working good..
thanks
tancs
sorry nick….
miss out some portions…
(else if (!p.url)
this.inPlaceSort();)
it work….
millions thanks……..
Hi i just tried the patch with the current version and r3 version of flexigrid but am not able to get sorting for a static data table. Any suggestions ? would appreciate a quick reply
. Currently am planning to go ahead with r3 version only to get something working.
Hi Alok,
Hard to make a suggestion unless I can see what’s going wrong. Did you use gnu patch to apply the patch, or do it by hand?
Why don’t you shoot me an email (address is easily found here on the website) and hopefully I can help you sort it out. Send your patched version of flexigrid.js and some simple example HTML/javascript that shows the problem.
Hi Nick,
Thanks for the reply. I will send out a patched version of my flexigrid.js and a sample html file over email. I am not good at javascript and so I will try to get all my doubts clear in my head and the approach I followed to get sort working after going through the source once more. Please bear with me and the delay. I will revert back to your email. Thanks a lot again.
Minor update, I applied the patch by hand.
The sorting is working. But probably I have made some errors. When i click on row headers it does not sort immediately. It sorts when I click on the header for the second time.
I never did receive an email from you; and I searched for your name in my gmail spam but nothing came up. So if you tried to send me that example, uh…. try again, I guess.
Awesome work. Have 1 doubts about flexigrid + 1 suggestion to your plugin..
Suggestion : The above code doesn’t consider the background if we use the striped feature.
The following code kind of fixes it.
$.each(rows, function() {
if (i % 2 && p.striped) $(this).addClass(‘erow’);
else $(this).removeClass(‘erow’);
$(parent).append(this);
i = i + 1;
});
My Question : Is is possible to have pagination when I don’t have dynamic table using ajax? If no, then do I need to write a function like above??
Thanks a lot, it work great.
We can even use this for non-static data as well.
I don’t think we require to fetch sorting result from server at all.
I also make inPlaceSort with a flag:
if (p.onChangeSort)
p.onChangeSort(p.sortname, p.sortorder);
else if(!p.url || p.inPlaceSort)
this.inPlaceSort();
else
this.populate();
And define inPlaceSort to true .
Do you have a link to the patched js?
I would pay good money for a js flexigrid file that could sort. Been trying to get this to work for hours… Please post or email me… (s.woods@yahoo.com)
Can you send me out a patched version? I would really appreciate it.
u can find a concise thread to extend the flexigrid
http://eaziweb.blogspot.com/2011/09/extend-flexigrid.html