Client Side Table Sort

This javascript function can be placed in its own .js file within your web application or included in the source code of a page. The function is designed to perform a client side sort of a html table. This means your users can click on table headers to sort the data, just like the quick sort service in PB. Because the sort is client side we don't need to round trip to the server to perform the sort, thus reducing the load on the server. If the user clicks for a second time the sort sequence is reversed.

/*----------------------------------------------------------------------------
    f_sort: Performs a client side sort of the contents of a HTML Table.

    args:   ao_table, The object reference to the table to be sorted.
            ai_sortcol, The zero based column number to be sorted.
            ab_header, Bool to indicate if the table have a header
                row to be ignored.

    vars:   lastcol, used to store the last column sorted.
            lastseq, used to store the sequence the last column was sorted by.
----------------------------------------------------------------------------*/
var lastcol, lastseq;
function f_sort( ao_table, ai_sortcol, ab_header )
{
    var ir, ic, is, ii, id;

    ir = ao_table.rows.length;
    if( ir < 1 ) return;

    ic = ao_table.rows[1].cells.length;
    // if we have a header row, ignore the first row
    if( ab_header == true ) is=1; else is=0;

    // take a copy of the data to shuffle in memory
    var row_data = new Array( ir );
    ii=0;
    for( i=is; i < ir; i++ )
    {
        var col_data = new Array( ic );
        for( j=0; j < ic; j++ )
        {
            col_data[j] = ao_table.rows[i].cells[j].innerText;
        }
        row_data[ ii++ ] = col_data;
    }

    // sort the data
    var bswap = false;
    var row1, row2;
    
    if( ai_sortcol != lastcol )
        lastseq = 'A';
    else
    {
        if( lastseq == 'A' ) lastseq = 'D'; else lastseq = 'A';
    }

    // if we have a header row we have one less row to sort
    if( ab_header == true ) id=ir-1; else id=ir;
    for( i=0; i < id; i++ )
    {
        bswap = false;
        for( j=0; j < id - 1; j++ )
        {
            // test the current value + the next and
            // swap if required.
            row1 = row_data[j];
            row2 = row_data[j+1];
            if( lastseq == "A" )
            {
                if( row1[ ai_sortcol ] > row2[ ai_sortcol ] )
                {
                    row_data[j+1] = row1;
                    row_data[j] = row2;
                    bswap=true;
                }
            }
            else
            {
                if( row1[ ai_sortcol ] < row2[ ai_sortcol ] )
                {
                    row_data[j+1] = row1;
                    row_data[j] = row2;
                    bswap=true;
                }
            }
        }
        if( bswap == false ) break;
    }

    // load the data back into the table
    ii = is;
    for( i=0; i < id; i++ )
    {
        row1 = row_data[ i ];
        for( j=0; j < ic; j++ )
        {
            ao_table.rows[ii].cells[j].innerText = row1[j];
        }
        ii++;
    }
    lastcol = ai_sortcol;
}

The function is simple to use, call is passing the table you want to sort, which column and if the table has a header. For example:

   <table NAME="A" ID="A">
      <tr>
         <th onclick="f_sort( document.all.A, 0, true );">Col 1</th>
         <th onclick="f_sort( document.all.A, 1, true );">Col 2</th>
      </tr>
      <tr><td>a</td><td>b</td></tr>
   </table>