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