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分頁

回答

相關問題