xml 分页转置事务排序数据在 xslt2 中显示为 html 表

问题描述 投票:0回答:1

得到了相同的旧(无序)xml数据文件(这次有7条“记录”)...

<trnsctns>  
 <trnsctn date="19/01/01"><OB>180</OB><amnt/></trnsctn>
 <trnsctn date="19/03/03"><OB/><amnt>33</amnt></trnsctn>
 <trnsctn date="19/02/02"><OB/><amnt>21</amnt></trnsctn>
 <trnsctn date="19/05/05"><OB/><amnt>29</amnt></trnsctn>
 <trnsctn date="19/04/04"><OB/><amnt>44</amnt></trnsctn>
 <trnsctn date="19/06/08"><OB/><amnt>17</amnt></trnsctn> 
<trnsctn date="19/07/03"><OB/><amnt>17</amnt></trnsctn>
</trnsctns>

并通过 Martin Honnen 的 xslt2/xslt3 转换样式表(xml 转置事务排序数据在 xslt2 中显示为 html 表)能够批量排序显示所有 xml 数据文件。

非常好的想法,我再次感谢他提供的这个有价值的解决方案。

一方面,所有这些(提到的)数据都应该显示在某些移动设备(手机)上,另一方面,所有数据都在增长,因此需要一种“分页”机制才能显示它。真的很抱歉继续提出这个问题,但我真的认为这是我最后一次需要这种要求。

无论如何,这个分页和排序的 xml 数据转换(xslt2/xslt3)显示我需要它完全按照以下小提琴所示:

https://jsfiddle.net/2twnxz97/7/

这意味着在之前的 xslt 转换之上,应该“仅”添加该分页系统。就这样吧。

期待这种分页技术,但不知道如何做到。 先谢谢大家了

您可以在 XSLT 的结果文档中使用您的脚本,例如根据之前的答案,您将添加一个模板,创建 HTML 并包含脚本,例如
xml xslt
1个回答
0
投票
<xsl:template match="/"> <html> <head xsl:expand-text="no"> <title>Example pagination</title> <script><![CDATA[ onload=function() { colsPerPage=3 currentPage=1 table=document.getElementById('myTable') totalCols = table.rows[0].cells.length - 1 // Exclude the header row // calculate the total number of pages totalPages = Math.ceil(totalCols/colsPerPage) // Initialize the pagination container paginationContainer=document.getElementById('pagination-container') // Initial display of the first page displayPage(1) } // Function to display the specified page function displayPage(pageNumber) { startIndex=(pageNumber-1)*colsPerPage + 1 endIndex=Math.min(startIndex+colsPerPage-1,totalCols) for(i=0;i<table.rows.length;i++) for(j=1;j<=totalCols;j++) table.rows[i].cells[j].style.display=(j>=startIndex && j <= endIndex)?'':'none' currentPage=pageNumber updatePagination() } function updatePagination() // update pagination controls { const paginationLinks=generatePaginationLinks() paginationContainer.innerHTML='' paginationContainer.appendChild(paginationLinks) } function generatePaginationLinks() { fragment = document.createDocumentFragment() createLink = function(text,clickHandler) { link=document.createElement('a') link.href = '#' link.textContent = text link.addEventListener('click',function(event) { event.preventDefault() clickHandler() }) return link } first = createLink('|<First',function() { displayPage(1) }) fragment.appendChild(first) previous = createLink('<Previous',function() { if(currentPage>1) displayPage(currentPage-1) }) fragment.appendChild(previous) pageInfo = document.createElement('span') pageInfo.id = 'pgnInf' pageInfo.textContent = `${currentPage}/${totalPages}` fragment.appendChild(pageInfo) next = createLink('Next>',function() { if(currentPage<totalPages) displayPage(currentPage + 1) }) fragment.appendChild(next) last=createLink('Last>|',function() { displayPage(totalPages) }) fragment.appendChild(last) return fragment } ]]></script> </head> <body> <xsl:apply-templates/> </body> </html> </xsl:template>

然后调整输出表格的模板以确保它具有 id 属性,并且还为您的分页/导航添加了
span

<xsl:template match="/trnsctns">
    <xsl:variable name="data-table">
      <tr>
          <th>date</th>
          <th>ob</th>
          <th>amnt</th>
          <th>cb</th>
      </tr>
        <xsl:call-template name="process">
            <xsl:with-param name="transactions" as="element()*" select="trnsctn => sort((), function($t) { replace($t/@date, '([0-9]{2})/([0-9]{2})/([0-9]{2})', '$3$2$1')})"/>
        </xsl:call-template>          
    </xsl:variable>
    
    <xsl:variable name="swapped-table" select="mf:swap-table($data-table/tr)"/>

    <table id="myTable" border="1">
      <tr>
        <th>crrntNmbr</th>
        <xsl:for-each select="1 to count($swapped-table[1]/*) - 1">
          <td>{position()}</td>
        </xsl:for-each>
      </tr>
      <xsl:sequence select="$swapped-table"/>
    </table>
    
    <span id="pagination-container"></span>

</xsl:template>

在线小提琴
(冗长的 URL 似乎适用于 Chrome 和 Firefox,但不适用于 Edge)。

您只需为表格布局和导航/分页区域添加 CSS,就应该得到您想要的结果。

© www.soinside.com 2019 - 2024. All rights reserved.