Jump to content
Sign in to follow this  
Robai

Sort a table

Recommended Posts

There are many JavaScripts available for free.So sorting a table (in any way) isn't an issue here.I'm seeking for as simple as possible way to sort tables (clicking on a column name should sort rows by that column values ascending, clicking again - descending).I guess that using JavaScript Sort function is not optimal for this purpose, but maybe I'm wrong.I can write my own sorting function (for tables, arrays of arrays, etc.), but this isn't the way I would like to do it (it's hard to believe JavaScript doesn't have a function for that).For example this table:

<table border="1" id="income_table">  <tr>	<th>Month</th>	<th>Clients</th>	<th>Income</th>  </tr>  <tr>	<td>January</td>	<td>20</td>	<td>120</td>  </tr>  <tr>	<td>February</td>	<td>21</td>	<td>100</td>  </tr>  <tr>	<td>March</td>	<td>19</td>	<td>110</td>  </tr></table>

Edited by Robai

Share this post


Link to post
Share on other sites

If it were me, I would start with an empty table and have all the values stored in arrays. I would write a function for populating the table from the arrays. And I would have a function that sorts the arrays based on some condition. I would populate the table at page load. Then have it sort and repopulate when your user clicks the top of a column.Unless you have a LOT of data, the process should feel pretty snappy.

Share this post


Link to post
Share on other sites

It's probably worth noting that any JavaScript related way can only sort the items in view. If the table contains only part of the full data, the sorted results may be misleading if the user expects the sorting to be done over the full result set.That being said, for me, perhaps not the most trivial, but certainly the most efficient way (even for large amounts of data on screen) will be with an XSLT transformation, applied to the whole table. The transformation itself is most easily executed with Sarissa. Upon transformation, you give a value to two parameters - one for the thing to sort by, and another one for the sorting order (ascending, descending). Sorting in XSLT is a trivial operation, especially on proper structures like tables. To preserve the headers at the top, it's a good idea to keep the headers in a thead, and only pass the tbody to the XSLT transformation.e.g. XSLT:

<?xml version="1.0"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">	<xsl:output omit-xml-declaration="yes" />	<xsl:param name="orderByColumn" />	<xsl:param name="descending" select="false()"/>	<xsl:template match="/*">		<xsl:copy>			<xsl:choose>				<xsl:when test="$descending">					<xsl:apply-templates>						<xsl:sort select="*[position() = $orderByColumn]" order="descending"/>					</xsl:apply-templates>				</xsl:when>				<xsl:otherwise>					<xsl:apply-templates>						<xsl:sort select="*[position() = $orderByColumn]" order="ascending"/>					</xsl:apply-templates>				</xsl:otherwise>			</xsl:choose>		</xsl:copy>	</xsl:template>	<xsl:template match="@*|node()">		<xsl:copy>			<xsl:apply-templates select="@*|node()"/>		</xsl:copy>	</xsl:template></xsl:stylesheet>

(the code is written with "*" to avoid any potential namespace problems. It will work for any structure that follows the same pattern as an HTML table, and will copy all nodes on deeper levels, along with all attributes that the original rows may have)

Share this post


Link to post
Share on other sites
It's probably worth noting that any JavaScript related way can only sort the items in view. If the table contains only part of the full data, the sorted results may be misleading if the user expects the sorting to be done over the full result set.
Unless all the data is stored in arrays, like DD suggested.

Share this post


Link to post
Share on other sites

Yeah, but you're still having the full data set present on the client... and if you have it within an array, there's no real reason not to also print it (except potential user convinience I suppose).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...