得到了相同的旧(无序)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 并包含脚本,例如
<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)。