Javascript Only Loading 10 Xml Nodes

I have an XML script that is listing all of my products and I have a Javascript in my html page to pull the content from the XML and paginate it. Although it only allows the specif

Solution 1:

JS Fiddle Demo

You have a loop that adds every product until nextMaxItem. Which is equal to perPage * page. So when you call it, you get 10. But the script gives you an error, because you don't have 10, but 7. It cannot find the other ones. To avoid that error, check if it exists in the for loop:

if(records[i] === undefined) break;

Edit

Some other small changes had to be made for it to work with any product number. All the relevant lines modified have a comment with an arrow:

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

functionpaganation(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=newXMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/xml/product_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
records = xmlDoc.getElementsByTagName("PRODUCT");
paganation(1);