Re: Table sorting

Discussion in 'HTML' started by Denis McMahon, Jun 28, 2013.

  1. On Thu, 27 Jun 2013 13:46:43 -0400, Ed Mullen wrote:

    > I Googled on how to dynamically sort tables and found too many
    > possibilities. Anyone here have a preferred method for doing this?


    I tend to build a js array of objects that matches the contents of the
    table cells, eg each row is an object with an attribute containing the
    text or numeric value of each row.

    Then I call array sort or array reverse when the head of a column is
    clicked on (reverse if this was not the last column clicked, else sort)
    and then walk through the table setting the new textContent of the cells
    to be the relevant attributes from the array of objects.

    I use a fairly simple sortNum(a,b) and sortStr(a,b). Generally sortColumn
    (a,b) maps to either sortNum(a,b), sortStr(a,b) or sometimes a custom
    sorter.

    Obviously while I'm walking through data[0] .... data[n-1] of the sorted
    array, I'm working on row[1] .... row[n] of the table, as row[0] is the
    headers.

    If you have markup inside the cells it's slightly trickier. In such cases
    it can be easier to store the cell's childNodes for use when repopulating
    cells, and also store the cell's textContent for use when sorting.

    --
    Denis McMahon,
     
    Denis McMahon, Jun 28, 2013
    #1
    1. Advertising

  2. On Fri, 28 Jun 2013 10:49:22 +0000, Denis McMahon wrote:

    > eg each row is an object with an attribute containing the
    > text or numeric value of each row.


    I meant: text or numeric value of each cell.

    eg suppose I have a table with a series of <th> or <td> in the top row
    with column names, and an equal number of <td> in all other rows. Table
    has an id attribute. The following function will return a tableData
    object with two attributes, a fields attribute containing the textContent
    of each field of the first row, and a data attribute which is an array of
    arrays, each sub-array being the textContent of the cells in that row in
    order.

    function getTableDataObject( table_id ) {

    var tdata, rowdata, fields, t, row, rows, i, j, tableData;
    fields = array();
    data = array();
    t = document.getElementById( table_id );

    for ( i = 0; i < t.rows[0].cells.length; i++ )
    fields.push( t.rows[0].cells.textContent );

    /* fields now contains a list of header fields */

    for ( i = 1; i < t.rows.length; i++ ) {
    row = new Array();

    for ( j = 0; j < t.rows.cells.length; j++ )
    row.push( t.rows.cells[j].textContent );

    data.push(row);
    }

    tableData = new Object();
    tableData.fields = fields;
    tableData.data = data;

    return tableData;

    }

    tdata[x][fieldname] should now contain the contents of the fieldname
    column in row x+1 of the table.

    Now to sort your table, all you need to do is tableData.data.sort(func)
    where func is a suitable sortFunction that takes two arrays of row cell
    textContents and compares the appropriate elements, return -1, 0 or 1 as
    needed. Then step through tableData.data[0...last] and table.rows
    [1...last] simultaneously, populating tablerow[n]cells[0...last] with the
    textContent from tableData.data[n-1][0...last]

    --
    Denis McMahon,
     
    Denis McMahon, Jun 28, 2013
    #2
    1. Advertising

  3. On Fri, 28 Jun 2013 13:20:07 +0000, Denis McMahon wrote:

    > tdata[x][fieldname] should now contain the contents of the fieldname
    > column in row x+1 of the table.


    Ignore that bit.

    --
    Denis McMahon,
     
    Denis McMahon, Jun 28, 2013
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Williams
    Replies:
    2
    Views:
    1,137
    Jacob Yang [MSFT]
    Aug 12, 2003
  2. Replies:
    2
    Views:
    1,441
    James Kanze
    Jul 6, 2010
  3. Jason
    Replies:
    0
    Views:
    390
    Jason
    Oct 4, 2006
  4. Tom Kirchner

    sorting by multiple criterias (sub-sorting)

    Tom Kirchner, Oct 11, 2003, in forum: Perl Misc
    Replies:
    3
    Views:
    476
    Michael Budash
    Oct 11, 2003
  5. Íéêüëáïò Êïýñáò

    Sorting a set works, sorting a dictionary fails ?

    Íéêüëáïò Êïýñáò, Jun 10, 2013, in forum: Python
    Replies:
    12
    Views:
    161
    Ulrich Eckhardt
    Jun 10, 2013
Loading...

Share This Page