Jump to content

Sort a table


Robai

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>

Link to comment
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.

Link to comment
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)

Link to comment
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.
Link to comment
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).

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...