xslt and tablesorter

DanMann 44 posts 42 karma points

Nov 23, 2011 @ 17:01

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

Copy Link

Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib

Nov 23, 2011 @ 17:46

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

Copy Link

DanMann 44 posts 42 karma points

Nov 23, 2011 @ 18:00

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="/">

<xsl:variable name="records" select="umbraco.contour:GetRecordsFromForm('f708fe0c-d01d-4dbf-9891-9bd620f0ae7a')" />

<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">
          
          <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.

Copy Link

DanMann 44 posts 42 karma points

Nov 23, 2011 @ 18:06

I did it!

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

XSLT and Tablesorter