我正在解析一个xml文件，并根据xml文件中的项目数，将内容显示在一个包含5列和x行的表中。不幸的是，一切都出现在页面上，我需要在我的javascript中实现分页来处理xml文件中的数百条记录。我在考虑每页50个项目或每个5列20行。以下是我到目前为止的代码：
使用Javascript：
function generateTables(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/test_102.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var content = document.getElementById('content');
var x=xmlDoc.getElementsByTagName("vids");
var xmlContent = "<table class='table' id='videos' border='0'>";
var rows = parseInt(x.length/5 + .6)
var count = 0;
var z = 0;
//Pagination idea. We can get the x.length value which is the total tags that we have. We can divide that by 50 to get teh number of pages we have. Then we can simply simply each on a pge and we will knwo the # of pages in a variable.
//rows
for (i=0;i<rows;i++) {
//This will handle if there is an uneven amount of columns.
if ((count + 5) > x.length)
{
z = x.length - count
}
else
{
(z = 5)
}
xmlContent += '<tr>'
//columns
for (y=0;y<z;y++) {
var title = x[count].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var vidPath = x[count].getElementsByTagName("vidPath")[0].childNodes[0].nodeValue;
var png = x[count].getElementsByTagName("pngPath")[0].childNodes[0].nodeValue;
var gif = x[count].getElementsByTagName("gifPath")[0].childNodes[0].nodeValue;
xmlContent += "<td align='center'>" + title;
xmlContent += "<br /><a href='"+ vidPath;
xmlContent+="'><img src='"+ png +"' width='50%'";
xmlContent+= "onmouseover=\"this.src='"+gif+"'\" onmouseout=\"this.src='"+png+"'\"/></a></td>";
count++
}
xmlContent += '</tr>'
}
xmlContent += "</table>";
//document.write(rows)
content.innerHTML = xmlContent;
}
这是我到目前为止的HTML：
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My tables</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/records.js"></script>
</head>
<body>
<div id="title">Page Title</div>
<div id="content"></div>
<script type="text/javascript">
window.onload = function() {
generateTables();
};
</script>
</body>
</html>
现在，它的工作原理是它将以正确的行/列显示所有记录。我只需要实现我到目前为止的分页。有什么想法吗？
答案 0 :(得分：0)
在用户点击按钮后，使用XMLHttpRequest增加onreadystatechange，然后让服务器发回您需要的信息。
答案 1 :(得分：0)
像现在一样渲染所有行并使用JavaScript（建议jQuery）隐藏超出您想要显示的数量的所有行（例如50）。
添加一个带有next和prev按钮的寻呼机，例如。 A标签如
<a href="#" id="pager_prev">Prev</a>
<a href="#" id="pager_next">Next</a>
现在将当前的寻呼机状态和最大寻呼机状态存储在变量
中var pagerState = 0;
var maxPagerState = ceil(jQuery('table#videos').find('tr').length / 50);
使用像这样的启动代码
// On document ready
jQuery(function()
{
// Get all rows
var rows = jQuery('table#videos').find('tr');
// Hide all rows
rows.hide();
// Select the first fifty rows
rows.slice(0, 50).show();
});
将onClick事件绑定到寻呼机按钮
// On click event: prev
jQuery('#pager_prev').click(function()
{
if(pagerState > 0)
{
pagerState--;
// Get all rows
var rows = jQuery('table#videos').find('tr');
// Hide all rows
rows.hide();
// Select the desired rows and show them
rows.slice(pagerState * 50, (pagerState + 1) * 50).show();
}
return false;
});
// On click event: next
jQuery('#pager_next').click(function()
{
if(pagerState < maxPagerState)
{
pagerState++;
// Get all rows
var rows = jQuery('table#videos').find('tr');
// Hide all rows
rows.hide();
// Select the desired rows and show them
rows.slice(pagerState * 50, (pagerState + 1) * 50).show();
}
return false;
});
我没有测试过，但我认为这是一个很好的开始。
编辑：在pager-next-function中切片行时可能会出现问题。但先测试一下。
答案 2 :(得分：0)
我找到了解决方案。这是：
function generateTables(start){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/test_102.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var content = document.getElementById('content');
var x=xmlDoc.getElementsByTagName("vids");
var xmlContent = "<table class='table' id='videos' border='0'>";
var columns =5;
var count = 0;
var z = 0;
var rows = 10;
//Pagination stuff
var totalContent = x.length;//total number of content
var noPerPage = rows*columns;//Number of content in one page
var noOfPage = 0;//Holds number of pages
if(totalContent%noPerPage == 0) {
noOfPage = Math.floor(totalContent/noPerPage);
}
else {
noOfPage = Math.floor((totalContent/noPerPage)+1);
}
//if total content is less than number of content in one page
if(totalContent < noPerPage) {
if(totalContent%columns == 0) {
rows = Math.floor(totalContent/columns);
}
else {
rows = Math.floor((totalContent/columns)+1);
}
noOfPage = 1;
}
//if total content is less than number of content in one page
if(totalContent < noPerPage) {
if(totalContent%columns == 0) {
rows = Math.floor(totalContent/columns);
}
else {
rows = Math.floor((totalContent/columns)+1);
}
noOfPage = 1;
}
var whichPage = (start/noPerPage)+1;//Current page number
var pagination = 5;//To show page numbers, better to keep odd number like 3,5,7 etc
var midPagination = Math.floor(pagination / 2);
var html = ""
for (i=0;i<rows;i++) {
//This will handle if there is an uneven amount of columns.
if ((start + 5) > x.length)
{
z = x.length - start
}
else
{
(z = 5)
}
if(x[start]) {
xmlContent += '<tr>'
}
//columns
for (y=0;y<z;y++) {
var title = x[start].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var vidPath = x[start].getElementsByTagName("vidPath")[0].childNodes[0].nodeValue;
var png = x[start].getElementsByTagName("pngPath")[0].childNodes[0].nodeValue;
var gif = x[start].getElementsByTagName("gifPath")[0].childNodes[0].nodeValue;
if(x[start]) {
xmlContent += "<td align='center'>" + title;
xmlContent += "<br /><a href='"+ vidPath;
xmlContent+="'><img src='"+ png +"' width='50%'";
xmlContent+= "onmouseover=\"this.src='"+gif+"'\" onmouseout=\"this.src='"+png+"'\"/></a></td>";
}
else {
xmlContent += "<td> </td>";
}
count++
start++
}
xmlContent += '</tr>'
}
//to generate pageinition
xmlContent += "<tr>";
xmlContent += "<td colspan='"+columns+"' align='center'>";
if(whichPage > pagination) {
xmlContent += "<a onclick='doPagination("+noPerPage*(whichPage-1-pagination)+")' style='cursor:pointer'><<</a> ";
}
if(whichPage > 1) {
xmlContent += "<a onclick='doPagination("+noPerPage*(whichPage-1-1)+")' style='cursor:pointer'><</a> ";
}
//generate page numbers
var fno = whichPage - midPagination;
var lno = whichPage + midPagination;
if(fno < 1 && noOfPage > pagination) {
fno = 1;
lno = pagination;
}
else if(fno < 1 && noOfPage <= pagination) {
fno = 1;
lno = noOfPage;
}
else if(lno > noOfPage && noOfPage <= pagination) {
fno = 1;
lno = noOfPage;
}
else if(lno > noOfPage && noOfPage > pagination) {
lno = noOfPage;
fno = (lno - pagination) + 1;
}
//loop pages numbers
for(var k=fno;k<=lno;k++) {
if(whichPage == k) {
xmlContent += "<b>"+k+"</b> ";
}
else {
xmlContent += "<a onclick='generateTables("+noPerPage*(k-1)+")' style='cursor:pointer'>"+k+"</a> ";
}
}
if(whichPage < noOfPage) {
xmlContent += "<a onclick='generateTables("+noPerPage*(whichPage-1+1)+")' style='cursor:pointer'>></a> ";
}
if(whichPage <= (noOfPage - pagination)) {
xmlContent += "<a onclick='generateTables("+noPerPage*(whichPage-1+pagination)+")' style='cursor:pointer'>>></a>";
}
xmlContent += "</td>";
xmlContent += "</tr>";
xmlContent += "</table>";
//Add generated html content
document.getElementById("content").innerHTML=xmlContent;
//document.write(rows)
//content.innerHTML = xmlContent;
}