动态分页

我在我的网站上使用这段代码进行产品分页。现在的问题是，所有的产品一次加载，每页显示36个产品。动态分页

现在我需要做的是我需要产品一次加载36个，然后当我们点击下一个时，下一个36个必须加载。有人可以帮忙吗？

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>

来源

2013-06-18 Ranbir Singh

HM interessting，你用jQuery12？我总是使用jQuery49 ... – Luke

我可以告诉你，如何在ajax中做到这一点。确保你在content.xml中放置了你的内容，并将标记名从'sometag'改为你想要的标签放入表中。希望它会有所帮助。

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

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

来源

2013-06-18 09:22:09

回答

相关问题