ajax로드 된 데이터를 페이지 매기기하는 방법은 무엇입니까?

Question

JQuery 게시물을 사용하여 양식의 데이터를로드합니다. 다음

<div id="results"></div> 

에

$("#SortItmesForm").submit(function() { 
    $.post("filtItems.php", 
     $("#FiltItemsForm").serialize(), 
     function(data) { 
      /*alert(data);*/ 
      $('#results').html(data); 
     } 
    ); 
    return false; //Code after form submitted 
}); 

FiltItems.php 출력이다.

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 

로드 된 결과에 페이지 매기기를하는 방법에 대한 지침이 없습니다. JQuery를 사용하는 것이 바람직하다.

많은 JQuery 플러그인을 사용해 보았지만 아무 것도 아약스로드 데이터로 작동하지 않는 것 같지 않습니다.

Answer 1

당연히이 경우 CSS도 중요합니다. 각 li이 페이지로 표시되기를 원한다고 가정 해 봅시다.

<ul id="list_container"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 
<a href="javascript:paginate.move('left');">&lt;</a> | <a href="javascript:paginate.move('right');">&gt;</a> 

CSS :

#results{ 
    width:200px; 
    height:200px; 
    overflow:hidden; 
} 

#list_container{ 
    width:600px; 
    margin-left:0px; 
} 

#list_container li{ 
    width:200px; 
    float:left; 
} 

JS : 분명히

var paginate = { 
    cur_offset: 0, 
    move: function move(dir) 
    { 
     if(dir == 'left') 
     { 
      paginate.cur_offset -= 200; 
      $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000); 
     } 
     else 
     { 
      paginate.cur_offset += 200; 
      $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000); 
     } 
    } 
}; 

당신이 1 페이지에 있다면 당신은 당신이 사용하지 왼쪽 화살표와 마지막 페이지를 비활성화 있도록 조항을 해보고 싶어요 그렇지만 다루기 쉽습니다.

귀하의 질문에 대한 오해가있을 수 있습니다. 또한

var elem = $('<div>'); 
elem.attr('id', some_id); 
elem.html(data.html); // assuming you pass json, if not then just data 
$('#results').append(elem); 

그리고 어떤 경우 JQuery와 .live 조사 : 당신이 당신의 아약스 호출의 결과를 렌더링하는 브라우저를 받고 문제가 있다면, 당신이 그렇게 같은 DOM 요소를 설정해야 할 것입니다 함수가 새로 생성 된 DOM 요소와 작동하지 않습니다.

플러그인의 경우 매우 모호합니다. 페이지 매김은 꽤 간단한 일이기 때문에 jquery에 대한 "페이지 매김"플러그인은 내 머리 꼭대기에서 떨어져 있습니다. 나는 기본적인 플러그인을 검색 할 필요성을 결코 발견하지 못했다.

이 답변이 유용하지만 더 많은 정보가 필요한 경우 알려 주시면 가능하면 업데이트하겠습니다.