0

私は現在xmlファイルを解析しており、コンテンツを5列のテーブルに表示し、xmlファイルにあるアイテムの数に応じてx行数を取得しています。残念ながら、すべてがページに表示されており、xml ファイルから何百ものレコードを処理するには、javascript にページネーションを実装する必要があります。1 ページあたり 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>

現在、これはすべてのレコードを正しい行/列に表示するという点で機能しています。これまでのところ、ページングを実装する必要があります。何か案は？

4

3 に答える 3