jQuery 페이지 매기기 - 페이지 당 행 수 제한

Question

AJAX 메서드를 사용하여 데이터를 가져 오려고합니다. 페이지 당 행 수를 제한하는 방법을 잘 모르겠습니다. jQuery을 사용하여 페이지 번호를 매기려면 어떻게해야합니까? 페이지 당 행 수를 제한하는 몇 가지 쉬운 방법을 제안 해 주시겠습니까?

$(document).ready(function() { 
 
    $.ajax({ 
 
    type: 'GET', 
 
    url: 'http://jsonplaceholder.typicode.com/posts', 
 
    dataType: 'jsonp', 
 
    success: function(data) { 
 
     console.log(data); 
 
     var tr; 
 
     for (var i = 0; i < data.length; i++) { 
 
     tr = $('<tr/>'); 
 
     tr.append("<td>" + data[i].userId + "</td>"); 
 
     tr.append("<td>" + data[i].id + "</td>"); 
 
     tr.append("<td>" + data[i].title + "</td>"); 
 
     tr.append("<td>" + data[i].body + "</td>"); 
 
     $('#table').append(tr);      
 
     } 
 
    }, 
 
    }); 
 
});

<div class="container"> 
 
    <div id = "numbers"></div> 
 
    <input type="button" id="addr" value="Add Data" /> 
 
    <h5>Table Data</h5> 
 
    <table class="table table-bordered table-striped" id="table"> 
 
    <tr> 
 
     <th>userId</th> 
 
     <th>id</th> 
 
     <th>title</th> 
 
     <th>body</th> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

난 당신이 DataTables Table plug-in for jQuery을 사용하는 것이 좋습니다 것입니다. 유연하고 강력하며 많은 시간을 절약 할 수 있습니다.

Answer 2

서버 쪽에서 페이지 매기기를 수행하는 것이 더 좋지만 엔드 포인트를 만들지 않았거나 프런트 엔드를 수행하려는 경우 결과를 계산하고 페이지에 대한 링크를 동적으로 만들어야합니다. ajax 요청을 다시 실행하고 클릭 한 페이지의 인수를 전달할 각 페이지 링크를 클릭 할 때 실행되는 함수를 작성하십시오. 다음과 같은 내용 :

function(pageNum) { 
    $.ajax({ 
    type: 'GET', 
    url: 'http://jsonplaceholder.typicode.com/posts', 
    dataType: 'jsonp', 
    success: function(data) { 
     console.log(data); 
     var tr; 
     for (var i = (pagenum - 1) * 10; i < pagenum * 10; i++) { 
     tr = $('<tr/>'); 
     tr.append("<td>" + data[i].userId + "</td>"); 
     tr.append("<td>" + data[i].id + "</td>"); 
     tr.append("<td>" + data[i].title + "</td>"); 
     tr.append("<td>" + data[i].body + "</td>"); 
     $('#table').append(tr);     
     } 
    } 
    }); 
}