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