0

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

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>

现在这正在起作用，它将在正确的行/列中显示所有记录。我只需要用我目前所拥有的实现分页。有任何想法吗？

4

3 回答 3

0

在用户单击按钮后使用XMLHttpRequest来递增onreadystatechange，然后让服务器发回您需要的信息。

于 2013-09-30T22:47:52.223 回答
0

像现在一样渲染所有行并使用 JavaScript（建议使用 jQuery）隐藏超出您想要显示的数量（例如 50）的所有行。

添加带有下一个和上一个按钮的寻呼机，例如。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-30T22:53:45.297 回答
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;

}
于 2013-10-01T17:28:28.707 回答