Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • DanMann 44 posts 42 karma points
    Nov 23, 2011 @ 17:01
    DanMann
    0

    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

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Nov 23, 2011 @ 17:46
    Chriztian Steinmeier
    0

    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  

  • DanMann 44 posts 42 karma points
    Nov 23, 2011 @ 18:00
    DanMann
    0

    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 "&#x00A0;">
    ]>
    <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"/>&nbsp;</td>
             
              <xsl:choose>
                  <xsl:when test=".//fields/status//value = 'Closed'">
                  <td bgcolor="green" align="center"><xsl:value-of select=".//fields/status//value"/>&nbsp;</td>
                  </xsl:when>
                    <xsl:when test=".//fields/status//value = 'Open'">
                    <td bgcolor="red" align="center"><xsl:value-of select=".//fields/status//value"/>&nbsp;</td>
                    </xsl:when>
                      <xsl:otherwise>
                      <td bgcolor="blue" align="center"><xsl:value-of select=".//fields/status//value"/>&nbsp;</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"/>&nbsp;</td>
                  <xsl:choose>
                  <xsl:when test=".//fields/raisedagainst//value = '1'">
                  <td bgcolor="#9966CC" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/>&nbsp;</td>
                  </xsl:when>
                  <xsl:when test=".//fields/raisedagainst//value = '2'">
                  <td bgcolor="#FFD700" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/>&nbsp;</td>
                  </xsl:when>
                  <xsl:when test=".//fields/raisedagainst//value = '3'">
                  <td bgcolor="#4169E1" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/>&nbsp;</td>
                  </xsl:when>
                  <xsl:when test=".//fields/raisedagainst//value = '4'">
                  <td bgcolor="#6495ED" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/>&nbsp;</td>
                  </xsl:when>
                  <xsl:when test=".//fields/raisedagainst//value = '5'">
                  <td bgcolor="#90EE90" align="center"><xsl:value-of select=".//fields/raisedagainst//value"/>&nbsp;</td>
                  </xsl:when>
                      <xsl:otherwise>
                      <td bgcolor="#CCCCCC" align="center"><xsl:value-of select=".//fields/status//value"/>&nbsp;</td>
                      </xsl:otherwise>
                  </xsl:choose>
               
              <td align="center"><xsl:value-of select=".//fields/raisedby//value"/>&nbsp;</td>
              <td align="left"><xsl:value-of select=".//fields/dateraised//value"/>&nbsp;</td>
              <td align="left"><xsl:value-of select=".//fields/datedue//value"/>&nbsp;</td>
              <td valign="top" align="left"><xsl:value-of select=".//fields/rootcause//value"/>&nbsp;</td>
              <td valign="top" align="left"><xsl:value-of select=".//fields/actionscompleted//value"/>&nbsp;</td>
              <td align="center"><xsl:value-of select=".//fields/dateclosedbyauditor//value"/>&nbsp;</td>
              <td valign="top" align="left"><xsl:value-of select=".//fields/notes//value"/>&nbsp;</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.

     

     

  • DanMann 44 posts 42 karma points
    Nov 23, 2011 @ 18:06
    DanMann
    0

    I did it!

Please Sign in or register to post replies

Write your reply to:

Draft