pxnx

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:

flexigrid-sort-in-place.diff

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:

  1. add “sortorder: ‘asc’” to the default properties struct up at the top
  2. add the “else if (!p.url) this.inPlaceSort();” clause to the end of the changeSort method
  3. copy in the inPlaceSort() function
Posted by Nick in Javascript, flexigrid, jQuery, plugins on August 31st, 2009

5 Comments

  1. Doc says:
    April 7, 2010 at 9:17 am

    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);
    });
    },

  2. Russell says:
    June 9, 2010 at 7:44 am

    Has anyone got an example of using this patched code. I have updated the script but can’t get it to work.

    thanks.

  3. Nick says:
    June 11, 2010 at 3:35 pm

    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.

  4. tancs says:
    June 30, 2010 at 8:28 pm

    Thanks nick…..

    but i tried with example…..and it was not allow to sort the rows……..but the css was working good..

    thanks
    tancs

  5. tancs says:
    June 30, 2010 at 8:40 pm

    sorry nick….

    miss out some portions…
    (else if (!p.url)
    this.inPlaceSort();)

    it work….

    millions thanks……..

Leave a Reply