JQuery에서 페이지 매김 관련 문제

JQuery로 XML 파일을 구문 분석하고 그 당시에 3 개의 게시물을 표시하고 나머지 게시물에 대한 링크를 페이지 매김 할 수 있어야합니다.JQuery에서 페이지 매김 관련 문제

아래 코드에서 slashdot에서 다운로드 한 로컬 XML 파일을 구문 분석하고 있습니다. 코드는 적절한 양의 게시물을 표시하고 페이지 매김 링크를 만듭니다. 그러나 페이지 매김 링크를 클릭하면 어떤 이유로 작동하지 않습니다. 저는 여전히 JQuery n00b이므로 문제가 무엇인지 잘못 생각하고 있습니다. JQuery에는 정말 좋은 디버깅 도구가 없다고 생각하십니까?

p.s. 원하는 경우 코드를 테스트 할 수 있도록 http://slashdot.org/slashdot.xml을 로컬에 다운로드 할 수 있습니다.

여기에 HTML이 유효 코드

<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

처음이다. 입력 태그는 자동 폐쇄되며 li 항목은 ul 또는 ol이 아니고 div 요소 안에 있어야합니다. go_to_page, next 및 previous 글로벌 범위에 포함되지 않기 때문에

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

둘째는, 사용자의 클릭 이벤트가 처리되지 않아요. 이러한 요소를 만들고 클릭 핸들러를 첨부해야합니다.

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

또 다른 팁은 이전 또는 다음 페이지 번호를 클릭하기 만하면 이전 및 다음 기능을 재구성합니다. 이렇게하면 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에서 페이지 매김 관련 문제

답변

관련 문제