gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:40:58 25 4
gpt4 key购买 nike

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

<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 调用中添加什么才能将分页功能添加到我的表中?我迷失了应该从哪里开始。

最佳答案

假设您知道首次生成页面时有多少页面,您可以为分页列表创建一个列表 block ,例如 -

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

关于javascript - 使用 ajax 和 jQuery 的服务器端分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12402730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com