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

jQuery Pagination - 限制每页的行数

2 个答案: