JQuery中的分頁問題

我需要能夠使用JQuery解析XML文件，在當時顯示3個帖子，並且有分頁鏈接到其他帖子。JQuery中的分頁問題

下面的代碼中，我解析了我從slashdot下載的本地XML文件。該代碼顯示適量的帖子並創建鏈接到分頁，但是當您單擊分頁鏈接時，由於某種原因它們不起作用。我仍然是一個JQuery n00b，所以我有問題找出什麼是錯的。看起來像JQuery沒有一個非常好的調試工具？

p.s.您可以將http://slashdot.org/slashdot.xml下載到您的本地，以便您可以測試代碼。

這裏是代碼

<html>                 
<head>                 
<script type="text/javascript" src="jquery-1.6.4.js"></script>   
<script type="text/javascript">    

    $(document).ready(function() 
      { 
       $.ajax({ 
       type: "GET", 
       url: "slashdot.xml", 
       dataType: "xml", 
       success: parseXml 
       }); 
      }); 
      function parseXml(xml) 
      { 
       //find every story 
       var count = 0; 
       $(xml).find("story").each(function() 
       { 
        count++; 
        var title = $(this).find('title').text() 
        var url = $(this).find('url').text() 

        var fullLink = '<li><a href="'+url+'">' + title + '</a></li>'; 
        //document.write('<a href="'+url+'">' + title + '</a><br/>'); 
        $("#content").append(fullLink); 
       }); 
       var show_per_page = 3; 
       var number_of_items = count; 
       var number_of_pages = Math.ceil(number_of_items/show_per_page); 
       $('#current_page').val(0); 
       $('#show_per_page').val(show_per_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>'; 
       $('#page_navigation').html(navigation_html); 
       $('#page_navigation .page_link:first').addClass('active_page'); 
       $('#content').children().css('display', 'none'); 
       $('#content').children().slice(0, show_per_page).css('display', 'block'); 
       function previous(){ 

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

       } 
       function next(){ 
        new_page = parseInt($('#current_page').val()) + 1; 
        //if there is an item after the current active link run the function 
        if($('.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($('#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 
        $('#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*/ 
        $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page'); 

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

       //$("#content").append('count:' + count); 

      } 



</script>                
</head>                 
<body>                 
    <!-- we will add our HTML content here --> 

    <input type="hidden" id="current_page"></input> 
    <input type="hidden" id="show_per_page"></input> 

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

    <div id="page_navigation"></div> 

</body>                 
</html>

來源

2011-09-25 CodeCrack

首先，你的HTML是無效的。輸入標籤是自動關閉的，並且li項目需要位於列表ul或ol而不是div元素內。

<input type="hidden" id="current_page" /> 
<input type="hidden" id="show_per_page" /> 
<ul id="content"></ul>

其次，你的點擊事件都沒有得到處理，因爲go_to_page，next和previous沒有在全球範圍內。您應該創建這些元素並附加點擊處理程序。

$("<a href='#'>Prev</a>").click(previous).appendTo("#page_navigation"); 
while (number_of_pages > current_link) { 
    $("<a href='#' class='page_link'>").text(++current_link).click(go_to_page).appendTo("#page_navigation") 
} 
$("<a href='#'>Next</a>").click(next).appendTo("#page_navigation");

另一個提示，重構prev和next功能，只需點擊上一個或下一個頁碼。這樣，this在go_to_page總是指向尋呼鏈接。

function previous(e) { 
    e.preventDefault(); //Don't follow the link 
    $(".active_page").prev(".page_link").click(); 
} 

function next(e) { 
    e.preventDefault(); 
    $(".active_page").next(".page_link").click(); 
} 

function go_to_page(e) { 
    e.preventDefault(); 

    //Get the zero-based index instead of using an attribute 
    var page_num = $(this).index(".page_link"); 

    //get the number of items shown per page 
    var show_per_page = parseInt($('#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 
    $('#content').children().hide().slice(start_from, end_on).show(); 

    //Since this always points to the page link, use that instead of looking for it 
    $(this).addClass("active_page").siblings(".active_page").removeClass("active_page"); 

    //update the current page input field. Don't need this anymore since we can use the .active_page class to identify it. 
    //$('#current_page').val(page_num); 
}

JSFiddle刪除了AJAX部分。

來源

2011-09-25 20:19:46 Dennis

JQuery中的分頁問題

回答

相關問題