Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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 specified limit which is 10 to show on each page which is correct although if I have one extra is just does not display it, also if I only have 2 or 8 products for example in my xml file it does not show the content at all. Please help.

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

XML file

<?xml version="1.0"?>
<CATALOG>
    <!--CLEANING CHEMICALS-->
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11101 - Dishwashing Liquid Morning Plus.jpg</IMAGE>
        <TITLE>Dishwashing Liquid Morning Plus 5lt</TITLE>
        <SHORTDESCRIPTION>Dishwashing Liquid Morning Plus Triple Concentrate Biodegradable, Non Phosphate, Septic Safe 5lt</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11102 Dishwashing Liquid Classic 20L.jpg</IMAGE>
        <TITLE>Classic Dishwash Liquid 20lt</TITLE>
        <SHORTDESCRIPTION>Classic Sink Dishwashing Liquid 20lt</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11103 Dishwashing Liquid Lemon Fresh.jpg</IMAGE>
        <TITLE>Dishwashing Liquid Lemon Fresh 1lt</TITLE>
        <SHORTDESCRIPTION>Dishwashing Liquid Lemon Fresh 1lt (12/ctn)</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11104 Machine Dishwash Powder ALL IN 1.jpg</IMAGE>
        <TITLE>Mach D/W Powder all In One 5k</TITLE>
        <SHORTDESCRIPTION>Machine Dishwash Powder All in One 5kg Biodegradable, Non Phosphate, Septic Safe</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11107 D1 Suma Star.jpg</IMAGE>
        <TITLE>D1 Suma Star + (4 x 1.5lt/ctn)</TITLE>
        <SHORTDESCRIPTION>Suma Star Plus D1 - Dispensed Sink Detergent Ultra Concentrate (4 x 1.5lt/ctn)</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11108 L4 Machine Detergent.jpg</IMAGE>
        <TITLE>L4 (2 x 5lt/ctn)</TITLE>
        <SHORTDESCRIPTION>Suma Special L4 - Hard Water Dishwashing Detergent (2 x 5lt/ctn) DG 8</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11109 Suma Rinse A5.jpg</IMAGE>
        <TITLE>A5 (2x5lt/ctn)</TITLE>
        <SHORTDESCRIPTION>Classic Sink Dishwashing Liquid 20lt</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11111 Suma Unison Maxi G3 4.5KG.jpg</IMAGE>
        <TITLE>G3 (3x4.5kg/ctn)</TITLE>
        <SHORTDESCRIPTION>Suma Unison Maxi G3 - Ultra Concentrated Hard Water Dishwashing Detergent and Destainer (3 x 4.5kg/ctn) DG 8</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11112 Suma Unison Clar A2 4L.jpg</IMAGE>
        <TITLE>A2 (3x4lt/ctn)</TITLE>
        <SHORTDESCRIPTION>Suma Unison Rinse Clar A2 - Ultra Concentrate (3 x 4lt/ctn)</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11119 Machine Dishwash Liquid.jpg</IMAGE>
        <TITLE>Machine Dishwash Liquid 5lt</TITLE>
        <SHORTDESCRIPTION>Machine Dishwash Liquid 5lt DG 8</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11120 Rinse Aid.jpg</IMAGE>
        <TITLE>Rinse Aid - Machine 5lt</TITLE>
        <SHORTDESCRIPTION>Rinse Aid - Machine 5lt</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11121 Machine Dishwash Liquid - 20L.jpg</IMAGE>
        <TITLE>Machine Dishwash Liquid 20lt</TITLE>
        <SHORTDESCRIPTION>Machine Dishwashing Liquid 20lt DG 8</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11122 Rinse Aid 20L.jpg</IMAGE>
        <TITLE>Rinse Aid - Machine 20lt</TITLE>
        <SHORTDESCRIPTION>Rinse Aid - Machine 20lt</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11406 View Quick.jpg</IMAGE>
        <TITLE>View Quick - Floor Cleaner 5lt</TITLE>
        <SHORTDESCRIPTION>View Quick - No Rinse Floor Cleaner 5lt</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11407 Stride Citrus HC.jpg</IMAGE>
        <TITLE>Stride Citrus HC 2 x 2.5lt</TITLE>
        <SHORTDESCRIPTION>Stride Citrus HC - Neutral Cleaner 2 x 2.5lt</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11408 Suma Bio Floor Cleaner.jpg</IMAGE>
        <TITLE>Suma Bio-floor Cleaner</TITLE>
        <SHORTDESCRIPTION>Suma Bio-Floor Cleaner 3.7lt/bottle</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/11501 Suma Calc D5.jpg</IMAGE>
        <TITLE>Suma Calc D5 - Descaler 2lt</TITLE>
        <SHORTDESCRIPTION>Suma Calc D5 - Kitchen Descaler 6x2lt/ctn DG 8</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/12101 Laundry Powder - Top Loader.jpg</IMAGE>
        <TITLE>Top-Load Laundry 15kg</TITLE>
        <SHORTDESCRIPTION>Laundry Powder - Premium Enzyme (Top-Load) 15kg</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/12102 Laundry Powder - Front Loader.jpg</IMAGE>
        <TITLE>Front-Load Laundry 12.5kg</TITLE>
        <SHORTDESCRIPTION>Enzymo Front (Front-Load Laundry Powder) 12.5kg</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/12104 Laundry Liquid Premium.jpg</IMAGE>
        <TITLE>Laundry Liquid Premium 5ltr</TITLE>
        <SHORTDESCRIPTION>Laundry Liquid Premium 5ltr</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/12105 Fabric Softener Premium.jpg</IMAGE>
        <TITLE>Fabric Softener Premium 5lt</TITLE>
        <SHORTDESCRIPTION>Fabric Softener Premium 5lt</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </PRODUCT>
    <PRODUCT>
        <IMAGE>/images/Products/Cleaning Chemical/12206 Clax 100 OB 2AL1.jpg</IMAGE>
        <TITLE>Clax 100 OB 2AL1 15ltr</TITLE>
        <SHORTDESCRIPTION>Clax 100 OB 2AL1 - Surfactant Booster 15ltr DG 9</SHORTDESCRIPTION>
        <CATEGORY>cleaning-chemicals</CATEGORY>
    </P

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
137 views
Welcome To Ask or Share your Answers For Others

1 Answer

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;

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);

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...