I have a macro that will create a table on a page from contour data, and I want to be able to sort that table by one of the header values. I think that table sorter will be the best option.
Do yourself a favor and put that in a separate JavaScript file - then load that in the bottom of your Master Template.
Just make sure to set the id attribute on the table to "myTable" - or perhaps even make it a class instead, e.g. "sortable" - that way, you could render multiple tables on the same page and have them all be sortable, if the browser knows how.
<!-- To use this sample out of the box, you'll have to have a form on the page that has a 'Name' and a 'Comment' field -->
<!-- Get all approved records of the current page by using the library method GetApprovedRecordsFromPage --> <xsl:variable name="records" select="umbraco.contour:GetRecordsFromForm('f708fe0c-d01d-4dbf-9891-9bd620f0ae7a')" />
<!-- Display the number of records --> <div id="recordscount" style="padding-bottom:10px"> <xsl:choose> <xsl:when test="count($records//uformrecord) = 0"> No Records </xsl:when> <xsl:when test="count($records//uformrecord) = 1"> 1 Record </xsl:when> <xsl:otherwise> <xsl:value-of select="count($records//uformrecord)"/> Records </xsl:otherwise> </xsl:choose>
</div>
<div id="records"> <div class="record" style="padding-bottom:10px"> <!-- Display 'Name' field of the record, make sure there is a field called 'Name' on the form --> <table id = "noncon" class="tablesorter" border="1" bordercolour="Black" width="150%" valign="top" margin= "0"> <thead> <tr> <th align="center" BGCOLOR="#CCCCCC">NCN Number</th> <th align="center" BGCOLOR="#CCCCCC">Status</th> <th align="center" BGCOLOR="#CCCCCC">Type</th> <th align="center" BGCOLOR="#CCCCCC">Details of NC / Observation</th> <th align="center" BGCOLOR="#CCCCCC">Raised Against</th> <th align="center" BGCOLOR="#CCCCCC">Raised By</th> <th align="center" BGCOLOR="#CCCCCC">Date Raised</th> <th align="center" BGCOLOR="#CCCCCC">Date Due</th> <th align="center" BGCOLOR="#CCCCCC">Root Cause</th> <th align="center" BGCOLOR="#CCCCCC">Actions Completed</th> <th align="center" BGCOLOR="#CCCCCC">Date Closed</th> <th align="center" BGCOLOR="#CCCCCC">Notes</th> </tr> </thead> <tbody> <xsl:for-each select="$records//uformrecord"> <xsl:sort select= ".//fields/ncnnumber//value" order="descending" /> <tr> <td align="center"><xsl:value-of select=".//fields/ncnnumber//value"/> </td>
XSLT and Tablesorter
Hi Guys,
I have a macro that will create a table on a page from contour data, and I want to be able to sort that table by one of the header values. I think that table sorter will be the best option.
I don't know how to do this. Where do I put the
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
Thanks
Dan
Hi Dan,
Do yourself a favor and put that in a separate JavaScript file - then load that in the bottom of your Master Template.
Just make sure to set the id attribute on the table to "myTable" - or perhaps even make it a class instead, e.g. "sortable" - that way, you could render multiple tables on the same page and have them all be sortable, if the browser knows how.
/Chriztian
Here is my template:
<%@ Master Language="C#" MasterPageFile="~/masterpages/Master.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="MasterContentPlaceHolder" runat="server">
<head>
<script type="text/javascript" src="../../../../scripts/jquery-1.7.js"></script>
<script type="text/javascript" src="../../../../scripts/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$function()
{
$("#noncon").tablesorter();
}
);
</script>
</head>
<div class="<umbraco:Macro Param="ScrolledForm" Alias="ReturnBlankIfPrintQsYes" runat="server"></umbraco:Macro>">
<div style="padding-left:85%;font-size:small;<umbraco:Macro Alias="HideIfPrintQsYes" runat="server"></umbraco:Macro>"><a href="?P=Y" target="_blank" class="link" >printable version</a></div>
<div style="float:center;">
<div class="MetaData">
<umbraco:Macro Alias="NonConformity" runat="server"></umbraco:Macro>
</div>
</div>
</div>
</asp:Content>
Here is the macro:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">
]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:umbraco.contour="urn:umbraco.contour"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets umbraco.contour ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<!-- To use this sample out of the box, you'll have to have a form on the page that has a 'Name' and a 'Comment' field -->
<!-- Get all approved records of the current page by using the library method GetApprovedRecordsFromPage -->
<xsl:variable name="records" select="umbraco.contour:GetRecordsFromForm('f708fe0c-d01d-4dbf-9891-9bd620f0ae7a')" />
<!-- Display the number of records -->
<div id="recordscount" style="padding-bottom:10px">
<xsl:choose>
<xsl:when test="count($records//uformrecord) = 0">
No Records
</xsl:when>
<xsl:when test="count($records//uformrecord) = 1">
1 Record
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="count($records//uformrecord)"/> Records
</xsl:otherwise>
</xsl:choose>
</div>
<div id="records">
<div class="record" style="padding-bottom:10px">
<!-- Display 'Name' field of the record, make sure there is a field called 'Name' on the form -->
<table id = "noncon" class="tablesorter" border="1" bordercolour="Black" width="150%" valign="top" margin= "0">
<thead>
<tr>
<th align="center" BGCOLOR="#CCCCCC">NCN Number</th>
<th align="center" BGCOLOR="#CCCCCC">Status</th>
<th align="center" BGCOLOR="#CCCCCC">Type</th>
<th align="center" BGCOLOR="#CCCCCC">Details of NC / Observation</th>
<th align="center" BGCOLOR="#CCCCCC">Raised Against</th>
<th align="center" BGCOLOR="#CCCCCC">Raised By</th>
<th align="center" BGCOLOR="#CCCCCC">Date Raised</th>
<th align="center" BGCOLOR="#CCCCCC">Date Due</th>
<th align="center" BGCOLOR="#CCCCCC">Root Cause</th>
<th align="center" BGCOLOR="#CCCCCC">Actions Completed</th>
<th align="center" BGCOLOR="#CCCCCC">Date Closed</th>
<th align="center" BGCOLOR="#CCCCCC">Notes</th>
</tr>
</thead>
<tbody>
<xsl:for-each select="$records//uformrecord">
<xsl:sort select= ".//fields/ncnnumber//value" order="descending" />
<tr>
<td align="center"><xsl:value-of select=".//fields/ncnnumber//value"/> </td>
<xsl:choose>
<xsl:when test=".//fields/status//value = 'Closed'">
<td bgcolor="green" align="center"><xsl:value-of select=".//fields/status//value"/> </td>
</xsl:when>
<xsl:when test=".//fields/status//value = 'Open'">
<td bgcolor="red" align="center"><xsl:value-of select=".//fields/status//value"/> </td>
</xsl:when>
<xsl:otherwise>
<td bgcolor="blue" align="center"><xsl:value-of select=".//fields/status//value"/> </td>
</xsl:otherwise>
</xsl:choose>
<td align="center"><xsl:value-of select=".//fields/type//value"/></td>
<td valign="top" align="left"><xsl:value-of select=".//fields/details//value"/> </td>
<xsl:choose>
<xsl:when test=".//fields/raisedagainst//value = '1'">
<td bgcolor="#9966CC" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/> </td>
</xsl:when>
<xsl:when test=".//fields/raisedagainst//value = '2'">
<td bgcolor="#FFD700" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/> </td>
</xsl:when>
<xsl:when test=".//fields/raisedagainst//value = '3'">
<td bgcolor="#4169E1" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/> </td>
</xsl:when>
<xsl:when test=".//fields/raisedagainst//value = '4'">
<td bgcolor="#6495ED" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/> </td>
</xsl:when>
<xsl:when test=".//fields/raisedagainst//value = '5'">
<td bgcolor="#90EE90" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/> </td>
</xsl:when>
<xsl:otherwise>
<td bgcolor="#CCCCCC" align="center"><xsl:value-of select=".//fields/status//value"/> </td>
</xsl:otherwise>
</xsl:choose>
<td align="center"><xsl:value-of select=".//fields/raisedby//value"/> </td>
<td align="left"><xsl:value-of select=".//fields/dateraised//value"/> </td>
<td align="left"><xsl:value-of select=".//fields/datedue//value"/> </td>
<td valign="top" align="left"><xsl:value-of select=".//fields/rootcause//value"/> </td>
<td valign="top" align="left"><xsl:value-of select=".//fields/actionscompleted//value"/> </td>
<td align="center"><xsl:value-of select=".//fields/dateclosedbyauditor//value"/> </td>
<td valign="top" align="left"><xsl:value-of select=".//fields/notes//value"/> </td>
</tr>
</xsl:for-each>
</tbody>
</table>
</div>
</div>
</xsl:template>
</xsl:stylesheet>
Which all works fine, but the table just does not have the sort options on.
I did it!
is working on a reply...