JQuery 中的分页问题

发布于 2024-12-06 07:27:04 字数 5182 浏览 1 评论 0原文

我需要能够使用 JQuery 解析 XML 文件，同时显示 3 个帖子，并具有链接到其余帖子的分页。

在下面的代码中，我正在解析从slashdot 下载的本地 XML 文件。该代码显示了正确数量的帖子并创建了分页链接，但是当您单击分页链接时，它们由于某种原因不起作用。我仍然是一个 JQuery n00b，所以我在找出问题所在时遇到了问题。好像JQuery没有一个很好的调试工具？

ps 您可以下载 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>

原文

I need to be able to parse an XML file with JQuery, show 3 posts at the time and have pagination that links to the rest of the posts.

Below in the code, I am parsing a local XML file that I have downloaded from slashdot. The code displays the right amount of posts and creates the links to paginate but when you click the pagination links, they do not work for some reason. I am still a JQuery n00b so I have problems figuring out what is wrong. Seems like JQuery does not have a really good debugging tool?

p.s. You can download http://slashdot.org/slashdot.xml to your local so you can test the code if you want.

here is the code

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

留蓝 2024-12-13 07:27:04

首先，你的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");

另一个提示，重组上一页和下一页功能，只需单击上一页或下一页页码。这样，go_to_page 中的 this 始终指向分页链接。

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 部分。

First, your html is invalid. Input tags are self-closing and li items need to be inside of a list ul or ol not a div element.

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

Second, your click events aren't getting handled because go_to_page, next and previous are not in the global scope. You should create those elements and attach click handlers.

$("<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");

Another tip, restructure the prev and next functions to just click on the previous or next page number. That way, this in go_to_page always points to the paging link.

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 with the AJAX part removed.

回复收藏 0 原文

~没有更多了~