动态分页

Question

I am using this piece of code for pagination of products on my website . 我正在使用这段代码在我的网站上对产品进行分页。 Now problem is that all the products get loaded at once .and 36 products are shown per page . 现在的问题是所有产品都被立即加载。每页显示36个产品。

Now What I need to do is that I need the products to load 36 at a time ,then when we click on next the next 36 must load . 现在我需要做的是，我需要一次加载36个产品，然后单击下一步，下一个36个必须加载。 can someone help with it .? 有人可以帮忙吗？

    script type="text/javascript"> 
var jQuery12 = jQuery.noConflict();
jQuery12(document).ready(function(){
paginationhello();

});
function paginationhello(){

    //how much items per page to show
    var show_per_page = 36; 
    //getting the amount of elements inside content div
    var number_of_items = jQuery12('#content').children().size();
    //calculate the number of pages we are going to have
    var number_of_pages = Math.ceil(number_of_items/show_per_page);

    //set the value of our hidden input fields
    jQuery12('#current_page').val(0);
    jQuery12('#show_per_page').val(show_per_page);

    //now when we got all we need for the navigation let's make it '

    /* 
    what are we going to have in the navigation?
        - link to previous page
        - links to specific pages
        - link to next page
    */
    var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
    var current_link = 0;
    while(number_of_pages > current_link){
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
        current_link++;
    }
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';

    jQuery12('#page_navigation').html(navigation_html);

    //add active_page class to the first page link
    jQuery12('#page_navigation .page_link:first').addClass('active_page');

    //hide all the elements inside content div
    jQuery12('#content').children().css('display', 'none');

    //and show the first n (show_per_page) elements
   jQuery12('#content').children().slice(0, show_per_page).css('display', 'block');


}

function previous(){

    new_page = parseInt(jQuery12('#current_page').val()) - 1;
    //if there is an item before the current active link run the function
    if(jQuery12('.active_page').prev('.page_link').length==true){
        go_to_page(new_page);
    }

}

function next(){
    new_page = parseInt(jQuery12('#current_page').val()) + 1;
    //if there is an item after the current active link run the function
    if(jQuery12('.active_page').next('.page_link').length==true){
        go_to_page(new_page);
    }

}
function go_to_page(page_num){
    //get the number of items shown per page
    var show_per_page = parseInt(jQuery12('#show_per_page').val());

    //get the element number where to start the slice from
    start_from = page_num * show_per_page;

    //get the element number where to end the slice
    end_on = start_from + show_per_page;

    //hide all children elements of content div, get specific items and show them
    jQuery12('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

    /*get the page link that has longdesc attribute of the current page and add active_page class to it
    and remove that class from previously active page link*/
    jQuery12('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

    //update the current page input field
    jQuery12('#current_page').val(page_num);
}

</script>

Answer 1

I can tell you, how to do this in ajax. 我可以告诉你，如何在ajax中做到这一点。 Make sure you put in your content in content.xml and change the tagname from 'sometag' to your desired tag to put in the table. 确保将内容放入content.xml中，并将标记名从“ sometag”更改为所需的标记以放入表中。 Hope it would help. 希望这会有所帮助。

<html>
<head>
<script type="text/javascript" >
var dataLoader;
var data;
var dataLength = 0;
var itemsPerPage = 10;
var noOfPages = 0;
var contentTable;

function createAjaxObject(){
var httpReq;
try {
    httpReq = new XMLHttpRequest();
} 
catch (e) {
    try {
        httpReq = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) {
        try {
            httpReq = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {
            return false;
        }
    }
}
return httpReq;
}

function loadData(){
dataLoader = createAjaxObject();
dataLoader.onreadystatechange = onDataLoad;
dataLoader.open('GET', 'contents.xml', true);
dataLoader.send(null);
}

function onDataLoad(){
if (dataLoader.readyState != 4) 
    return;

if (dataLoader.status != 200 && dataLoader.status != 0) 
    return;

data = dataLoader.responseXML.documentElement.getElementsByTagName('content');
contentTable = document.getElementById('contents');
dataLength = data.length;
noOfPages = data.length / itemsPerPage;
displayPage(0);
buildNavMenu();
}

function displayPage(pagenum){

startItem = pagenum * itemsPerPage;
endItem = startItem + itemsPerPage;

while (contentTable.rows.length > 1) 
    contentTable.deleteRow(1);

for (i = startItem; i < endItem; i++) {
    newrow = contentTable.insertRow(-1);
    newrow.insertCell(-1).innerHTML = data[i].getElementsByTagName('sometag')[0].textContent;
    newrow.insertCell(-1).innerHTML = data[i].getElementsByTagName('sometag2')[0].textContent;
    newrow.insertCell(-1).innerHTML = data[i].getElementsByTagName('sometag3')[0].textContent;
}

}

function buildNavMenu(){
navMenu = document.getElementById('navMenu').rows[0];

for (i = 0; i < noOfPages; i++) {
    newcell = navMenu.insertCell(-1);
    newcell.innerHTML = i + 1;
    newcell.onclick = new Function("displayPage(" + i + ");");
}
}

</script>
</head>

<body onload="loadData()">
    <table width="500" border="1" id="contents">
        <tr>
            <th scope="col">Rank</th>

            <th scope="col">Name</th>

            <th scope="col">Earning</th>
        </tr>
    </table>

    <table id="navMenu" border="1">
        <tr>
            <td>
            </td>
        </tr>
    </table>
</body>
</html>

Now content.xml. 现在是content.xml。

<?xml version="1.0" encoding="UTF-8"?>
<contents>
<content>

</content>
<content>

</content>
<content>

</content>
<content>

</content>
<content>

</content>
<content>

</content>
<content>

</content>
<content>

</content>
<content>

</content>
<content>

</content>
</content>

动态分页

问题描述

1 个解决方案

解决方案1
0 2013-06-18 09:22:09

动态分页

问题描述

1 个解决方案

解决方案1 0 2013-06-18 09:22:09

解决方案1
0 2013-06-18 09:22:09