jQueryページネーション - ページあたりの行数を制限する

Question

AJAXメソッドを使用してデータを取得しようとしています。ページあたりの行数を制限する方法がわかりません。 jQueryを使用してページを設定するにはどうすればよいですか？ 1ページあたりの行数を制限する簡単な方法を教えてください。

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