Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: Table sorting

Reply
Thread Tools

Re: Table sorting

 
 
Denis McMahon
Guest
Posts: n/a
 
      06-28-2013
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, http://www.velocityreviews.com/forums/(E-Mail Removed)
 
Reply With Quote
 
 
 
 
Denis McMahon
Guest
Posts: n/a
 
      06-28-2013
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[i].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[i].cells.length; j++ )
row.push( t.rows[i].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, (E-Mail Removed)
 
Reply With Quote
 
 
 
 
Denis McMahon
Guest
Posts: n/a
 
      06-28-2013
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, (E-Mail Removed)
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Sorting list vs sorting vector boltar2003@boltar.world C++ 2 07-06-2010 09:40 AM
fired event Sorting which wasn't handled - sorting and SelectedIndexChanged Jason ASP .Net Web Controls 0 10-04-2006 02:19 PM
Table/table rows/table data tag question? Rio HTML 4 11-05-2004 08:11 AM
sorting by multiple criterias (sub-sorting) Tom Kirchner Perl Misc 3 10-11-2003 05:16 PM
Could not load type VTFixup Table from assembly Invalid token in v-table fix-up table. David Williams ASP .Net 2 08-12-2003 07:55 AM



Advertisments