使用 ajax 和 jQuery 的服务器端分页

Question

好的。所以我有一个包含用户列表的表格。

<table id="UserTableContainer">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
</table>

当我加载页面时，我调用一个 JSON 方法从服务器检索用户列表。

$(function () {
    $.getJSON(
        '/Account/UserList',
        null,
        function (data) {
            $.each(data, function (i, item) {
                PrintUsers(item);
            });
        });
});

我的 PrintUsers 方法使用 jQuery 模板将用户添加到表中的每一行。

function PrintUsers(item) {
$.template('userList', '<tr>\
 <td>${Firstname}</td>\
 <td>${Lastname}</td>\
 </tr>');

$.tmpl('userList', item).appendTo("#UserTableContainer");

在服务器端，我从 API 获取列表。

public JsonResult UserList()
{
    try
    {
        List<User> users;         

        users = LoadUser(new UserFilter());
        }
        return Json(users, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        return Json(JsonRequestBehavior.DenyGet);
    }
}

我用来获取列表的 API 已经内置了分页功能。有一个重载选项可以将 int startIndex 和 int pageSize 传递给 UserFilter() 对象。

我需要在我的 jQuery 和 ajax 调用中添加什么来向我的表添加分页功能？我迷失在我应该开始的地方。

Answer 1

假设您在第一次生成页面时知道有多少页面，您可以为分页列表创建一个列表块，例如 -

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    ...
</ul>

然后您可以将您的 jQuery 更改为类似 -

function getPage(startPage, selectedPageSize) {
    $.getJSON(
        '/Account/UserList?startPage=' + startPage + '?pageSize=' + selectedPageSize,
        null,
        function (data) {
            $.each(data, function (i, item) {
                PrintUsers(item);
            });
        }
    );
}

var pageSize = 10;
$(document).ready(function() {
    getPage(0, pageSize);
});

$(function(){
    $('li').click(function() {
        var page = $(this).text();
        getPage(page, pageSize);
    });
});