javascript和xml分页

我目前正在解析一个xml文件，并获取内容显示在一个5列的表和x行数取决于项目的数量是在xml文件中。不幸的是，一切都出现在页面上，我需要在我的JavaScript中实现分页以处理来自xml文件的数百条记录。我想每页50个项目或每列5列20行。下面是我的代码至今：javascript和xml分页

的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>

眼下这是工作的，因为它会显示所有记录在正确的行/列中。我只需要用我迄今为止的分页来实现分页。有任何想法吗？

来源

2013-09-30 Chango Mango

不创建一个适当的'XMLHttpRequest'，应该使用'onreadystatechange'事件来再检查'如果（xmlhttp.readyState == && xmlhttp.status == 200）'。另外，你的'xmlhttp'变量是全局变量。 – PHPglue

我找到了解决方案。那就是：

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; 

}

来源

2013-10-01 17:28:28

用户单击按钮后，使用XMLHttpRequest增加onreadystatechange，然后让服务器将所需信息发送回去。

来源

2013-09-30 22:47:52 PHPglue

像现在这样呈现所有行，并使用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中切片行时可能有问题。但先测试一下。

来源

2013-09-30 22:53:45 SlapY

javascript和xml分页

回答

相关问题