好吧。所以，我有其中包含的用户列表的表格。

Alright. So I have a table which holds a list of users.

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

当我打开我所说的JSON的方法来从服务器获取用户列表的页面。

When I load the page I call a JSON method to retrieve the list of users from the server.

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

在哪里我PrintUsers-方法使用jQuery的模板，将用户添加到其每行的表。

Where my PrintUsers-method uses the jQuery template to add the users to each of its row in the table.

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

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

在服务器端我从一个API列表。

On the server side I get the list from an 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（）对象。

The API which I am using to get the list already has built in functionality on paging. There's an overload option to pass int startIndex and int pageSize into the UserFilter() object.

我需要什么，以我的jQuery的添加和AJAX调用分页功能添加到我的表？我在哪里我应该开始丢失。

What do I need to add in my jQuery and ajax calls to add paging functionality to my table? I'm lost at where I should begin.

推荐答案

假设你知道有多少页面时，首先产生的页面，您可以像分页列表创建列表块 -

Assuming you know how many pages there when the page is first generated you can create a list block for your paging list like -

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

然后你可以改变你的jQuery的东西一样 -

You could then change your jQuery to something like -

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