JavaScript仅加载10个xml节点_Javascript_Html_Xml

JavaScript仅加载10个xml节点

javascript html xml

JavaScript仅加载10个xml节点,javascript,html,xml,Javascript,Html,Xml,我有一个XML脚本，它列出了我所有的产品，我的html页面中有一个Javascript，用于从XML中提取内容并对其进行分页。虽然它只允许在每个页面上显示指定的限制，即10，这是正确的，尽管如果我有一个额外的is，它不会显示它，而且如果我只有2个或8个产品，例如在我的xml文件中，它根本不会显示内容。请帮忙 <div id="content"></div> <div id="pagination"></div> <script>

我有一个XML脚本，它列出了我所有的产品，我的html页面中有一个Javascript，用于从XML中提取内容并对其进行分页。虽然它只允许在每个页面上显示指定的限制，即10，这是正确的，尽管如果我有一个额外的is，它不会显示它，而且如果我只有2个或8个产品，例如在我的xml文件中，它根本不会显示内容。请帮忙

<div id="content"></div>
<div id="pagination"></div>
<script>

    var page = 1, perPage = 10, content = document.getElementById('content'),
    pagination = document.getElementById('pagination'), records;

    function paganation(page)
    {
        var nextMaxItem = perPage * page;
        var fromItem = (page - 1) * perPage;
        var maxPages = records.length / perPage;

        var xmlContent = '<div class="row">';
        for (var i = fromItem; i < nextMaxItem; i++) {
            xmlContent += '<article class="post all ';
            xmlContent += records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue;
            xmlContent += '" id="">';
            xmlContent += '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail">';
            xmlContent += '<img src="';
            xmlContent += records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue;
            xmlContent += '" />';
            xmlContent += '<div class="caption">';
            xmlContent += '<a href="';
            xmlContent += records[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue;
            xmlContent += '">';
            xmlContent += '<h4>';
            xmlContent += records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
            xmlContent += '</h4>';
            xmlContent += '</a>';
            xmlContent += '<p>';
            xmlContent += records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue;
            xmlContent += '</p>';
            xmlContent += '</div>';
            xmlContent += "</div></div></article>";
        }
        xmlContent += "</div>";
        content.innerHTML = xmlContent;

        var paginationContent = "";
        var previous = page - 1;
        if (page > 1) {
            paginationContent += '<a href="javascript:paganation('+previous+');">Back</a>';
        } else {
            paginationContent += "Back";
        }

        for (var j = 1; j < Math.ceil(maxPages); j++) {
            paginationContent += " ";
            paginationContent += '<a href="javascript:paganation('+j+');">'+j+'</a>';
            paginationContent += " ";
        }

        var next = page + 1;
        if (next <= maxPages) {
            paginationContent += '<a href="javascript:paganation('+next+');">Next</a>';
        } else {
            paginationContent += "Next";
        }
        pagination.innerHTML = paginationContent;
    }

    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/product_catalog.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    records = xmlDoc.getElementsByTagName("PRODUCT");
    paganation(1);

</script>


var page=1，perPage=10，content=document.getElementById（'content'），
pagination=document.getElementById（'pagination'），记录；
功能分页（第页）
{
var nextMaxItem=每页*页；
var fromItem=（第1页）*每页；
var maxPages=records.length/perPage；
var xmlContent=''；
对于（变量i=fromItem；i”；
xmlContent+=records[i].getElementsByTagName（“SHORTDESCRIPTION”）[0].childNodes[0].nodeValue；
xmlContent+=''；
xmlContent+=''；
xmlContent+=”；
}
xmlContent+=”；
content.innerHTML=xmlContent；
var paginationContent=“”；
var previous=第1页；
如果（第1页）{
分页内容+=''；
}否则{
分页内容+=“返回”；
}
对于（var j=1；j


您有一个循环，可以添加每个产品，直到nextMaxItem
。它等于perPage*page
。因此，当您调用它时，您会得到10
。但是脚本会给您一个错误，因为您没有10个，但是有7个。它找不到其他产品。要避免该错误，请检查for
循环中是否存在该错误：
if(records[i] === undefined) break;

编辑
为了使用任何产品编号，必须进行一些其他小改动。所有修改的相关行都有一个带箭头的注释：
var page = 1, perPage = 10, content = document.getElementById('content'),
pagination = document.getElementById('pagination'), records;

function paganation(page)
{
    var nextMaxItem = perPage * page,
        fromItem = (page - 1) * perPage,
        maxPages = Math.ceil( records.length / perPage ), // <-----------

        xmlContent = '<div class="row">';
    for (var i = fromItem; i < nextMaxItem; i++) {
        if(records[i] === undefined) break; // <-----------
        xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
            + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail">'
            + '<img src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" />'
            + '<div class="caption">'
            + '<a href="' + records[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue + '">'
            + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
            + '</a>'
            + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
            + '</div>'
            + "</div></div></article>";
    }
    xmlContent += "</div>";
    content.innerHTML = xmlContent;

    var paginationContent = "";
    if (page > 1) {
        paginationContent += ' <a href="javascript:paganation('+(page - 1)+');">Back</a> ';
    } else {
        paginationContent += " Back ";
    }

    for (var j = 1; j <= maxPages; j++) { // <----------- <= instead of <
        paginationContent += ' <a href="javascript:paganation('+j+');">'+j+'</a> ';
    }

    var next = page + 1;
    if (next <= maxPages) {
        paginationContent += ' <a href="javascript:paganation('+next+');">Next</a> ';
    } else {
        paginationContent += " Next ";
    }
    pagination.innerHTML = paginationContent;
}

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/product_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
records = xmlDoc.getElementsByTagName("PRODUCT");
paganation(1);

var page=1，perPage=10，content=document.getElementById（'content'），
pagination=document.getElementById（'pagination'），记录；
功能分页（第页）
{
var nextMaxItem=每页*页，
fromItem=（第1页）*每页，
maxPages=Math.ceil（records.length/perPage），//1）{
分页内容+=''；
}否则{
分页内容+=“返回”；
}
对于（var j=1；j适用于10岁以下的任何人，但10岁以上的任何人，例如12岁或18岁的人，直到你20@Zachary1748是的，对不起，我刚刚修复了这个问题，请看新代码。太棒了！！非常感谢！我还有一个问题，如何对xml内容的显示顺序进行随机排序？而且我刚刚注意到如果我的xml文件中有14个以上的产品/节点，它会停止显示所有这些产品/节点。下面是控制台中显示的错误；未捕获的TypeError:无法读取null的属性'getElementsByTagName'，它表示错误来自这行代码；records=xmlDoc.getElementsByTagName（“产品”）；
var page = 1, perPage = 10, content = document.getElementById('content'),
pagination = document.getElementById('pagination'), records;

function paganation(page)
{
    var nextMaxItem = perPage * page,
        fromItem = (page - 1) * perPage,
        maxPages = Math.ceil( records.length / perPage ), // <-----------

        xmlContent = '<div class="row">';
    for (var i = fromItem; i < nextMaxItem; i++) {
        if(records[i] === undefined) break; // <-----------
        xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
            + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail">'
            + '<img src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" />'
            + '<div class="caption">'
            + '<a href="' + records[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue + '">'
            + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
            + '</a>'
            + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
            + '</div>'
            + "</div></div></article>";
    }
    xmlContent += "</div>";
    content.innerHTML = xmlContent;

    var paginationContent = "";
    if (page > 1) {
        paginationContent += ' <a href="javascript:paganation('+(page - 1)+');">Back</a> ';
    } else {
        paginationContent += " Back ";
    }

    for (var j = 1; j <= maxPages; j++) { // <----------- <= instead of <
        paginationContent += ' <a href="javascript:paganation('+j+');">'+j+'</a> ';
    }

    var next = page + 1;
    if (next <= maxPages) {
        paginationContent += ' <a href="javascript:paganation('+next+');">Next</a> ';
    } else {
        paginationContent += " Next ";
    }
    pagination.innerHTML = paginationContent;
}

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/product_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
records = xmlDoc.getElementsByTagName("PRODUCT");
paganation(1);