Copied to clipboard

Flag this post as spam?

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


  • syn-rg 282 posts 425 karma points
    Nov 01, 2012 @ 05:49
    syn-rg
    0

    Pagination using input onchange

     

    I'm creating some pagination for my website, and want to use an input-element to navigate between pages.

    Like the following example:

     

    Would this be possible to do with XSLT?

    Here's what I have so far, I can't figure out where to put the URL changing code:

    <xsl:variable name="FF_pageUI" select="umbraco.library:RequestForm('pageUI')" />
    
    <form action="#">
      <div class="pagerUI">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <!-- previous page -->
            <xsl:if test="$page &gt; 1">
              <td class="pager-prev"><a class="previous" href="{concat('?page=', $page - 1, $qs)}" title="Previous page">&#8249;</a></td>
            </xsl:if>
            <td>Page</td>
            <td><input id="pageUI" type="text" onchange="document.getElementById('BoostMasterForm').submit()">
              <xsl:choose>
                <xsl:when test="$page=1">
                  <xsl:attribute name="value">1</xsl:attribute>
                </xsl:when>
                <xsl:otherwise>
                  <xsl:attribute name="value"> <xsl:value-of select="$currentPageNumber" /> </xsl:attribute>
                </xsl:otherwise>
              </xsl:choose>
              </input></td>
            <td>of <xsl:value-of select="$numberOfPages"/></td>
            <!-- next page -->
            <xsl:if test="$page * $resultsPerPage &lt; count($matchedNodes)">
              <td class="pager-next"><a class="next" href="{concat('?page=', $page + 1, $qs)}" title="Next page">&#8250;</a></td>
            </xsl:if>
          </tr>
        </table>
      </div>
    </form>

    I've also posted this a jQuery question on Stackoverflow:

    http://stackoverflow.com/questions/13150264/jquery-pagination-go-to-page-on-input-value-change

    Any help would be greatly appreciated.

    Cheers, JV

     

  • syn-rg 282 posts 425 karma points
    Nov 02, 2012 @ 00:32
    syn-rg
    0

    I got it working using the following:

    <form type="get" onchange="return false">
      <div class="pagerUI">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <!-- previous page -->
            <xsl:if test="$page &gt; 1">
              <td class="pager-prev"><a class="previous" href="{concat('?page=', $page - 1, $qs)}" title="Previous page">&#8249;</a></td>
            </xsl:if>
            <td>Page</td>
            <td><input type="number" name="page" id="page" min="1" >
              <xsl:choose>
                <xsl:when test="$page=1">
                  <xsl:attribute name="value">1</xsl:attribute>
                </xsl:when>
                <xsl:otherwise>
                  <xsl:attribute name="value"> <xsl:value-of select="$currentPageNumber" /> </xsl:attribute>
                </xsl:otherwise>
              </xsl:choose>
              <xsl:attribute name="max"> <xsl:value-of select="$numberOfPages"/> </xsl:attribute>
              </input></td>
            <td>of <xsl:value-of select="$numberOfPages"/></td>
            <!-- next page -->
            <xsl:if test="$page * $resultsPerPage &lt; count($matchedNodes)">
              <td class="pager-next"><a class="next" href="{concat('?page=', $page + 1, $qs)}" title="Next page">&#8250;</a></td>
            </xsl:if>
          </tr>
        </table>
      </div>
    </form>
Please Sign in or register to post replies

Write your reply to:

Draft