layui分页怎么配合C# ASP.NET开发

千敏姑娘_7167

千敏姑娘_7167

2026-08-08

752人浏览

原创

layui分页必须后端返回含code、msg、count、data四字段的json,且count为全量总数、data为当前页数组,否则静默失败;page和limit参数需正确绑定并校验,避免越界或不一致。

layui分页怎么配合c# asp.net开发

Layui 分页必须配合后端返回特定 JSON 结构,否则 table.render() 会直接静默失败或报 data is undefined 错误。核心不是“怎么调用”,而是“前后端字段对齐”和“分页逻辑不越界”。

后端返回的 JSON 必须严格满足 Layui 的 schema

Layui 的 table.render() 默认只认四个顶层字段:code、msg、count、data。少一个或拼错(比如写成 total 或 records),表格就渲染不出数据,控制台也无明显报错。

  • code:数字,0 表示成功(非 0 时 Layui 会弹出 msg 提示)
  • msg:字符串,仅用于提示,可为空
  • count:整数,**必须是全量总记录数**(不是当前页条数),Layui 靠它算总页数
  • data:数组,当前页的数据列表,每个元素字段要和 cols 中的 field 一一对应

示例正确返回:

{ "code": 0, "msg": "", "count": 128, "data": [ { "id": 1, "name": "张三", "age": 25 }, { "id": 2, "name": "李四", "age": 30 } ] }

Read(int page, int limit) 的参数和分页计算不能硬编码

ASP.NET MVC 默认会把 URL 查询参数(如 ?page=2&limit=10)自动绑定到 Action 方法参数。但要注意两点:

  • page 是从 1 开始的,Skip((page - 1) * limit) 才能取对;若传入 page=0 或负数,Skip 会抛 ArgumentOutOfRangeException
  • limit 要做上限限制(比如最大 100),否则恶意请求 ?limit=999999 可能拖垮数据库
  • EF 的 Count() 和 Skip().Take() 要用同一个查询条件,否则 count 和 data 对不上(比如带搜索条件时漏了 where)

推荐写法:

C#
C#

"避开 C# 常见错误——空陷阱、异步陷阱、LINQ 陷阱及资源泄漏。"

下载
public ActionResult Read(int page = 1, int limit = 10) {
    limit = Math.Min(limit, 100); // 防爆
    if (page var query = _context.Users.AsQueryable();
// 若有搜索条件,这里加 query = query.Where(...)

var total = query.Count();
var data = query.Skip((page - 1) * limit).Take(limit).ToList();

return Json(new { code = 0, msg = "", count = total, data }, JsonRequestBehavior.AllowGet);

}

前端 table.render() 的 url 和 where 易忽略跨域与参数透传

如果后端接口不在同域(比如前端跑 http://localhost:3000,MVC 跑 http://localhost:5000),默认 AJAX 会被浏览器拦截。此时要么后端启用 CORS,要么在 table.render() 中显式配 method: 'post' 并确保后端 Action 允许 POST(加 [HttpPost])。

  • where 是对象,所有键值都会作为查询参数附加到 URL 后(GET)或请求体中(POST),适合传搜索条件
  • 不要在 url 字符串里手动拼参数(如 '/User/Read?page=1&limit=10'),会和 Layui 内部翻页机制冲突
  • 若用 POST,后端 Action 必须支持 POST,且返回 JSON 时避免 JsonRequestBehavior.AllowGet(它只允许 GET)

正确配置示例:

table.render({
  elem: '#demo',
  url: '/User/Read',
  method: 'post', // 对应 [HttpPost] public ActionResult Read(...)
  where: { status: 'active' }, // 最终发 POST /User/Read?status=active
  page: true,
  limit: 10
});

分页控件不显示?先查 count 是否为 0 或 NaN

Layui 分页控件是否出现,完全取决于后端返回的 count 值。即使 data 数组有内容,只要 count === 0 或根本没返回 count,分页栏就彻底消失——这不是 bug,是设计逻辑。

  • 打开浏览器 DevTools → Network → 点击分页按钮,看接口响应体里有没有 count 字段,值是不是正整数
  • EF 的 Count() 如果走的是内存集合(比如 .ToList().Count()),性能极差且容易出错;务必确保是 IQueryable.Count()
  • SQL Server 中 COUNT(*) 很快,但若表极大且没索引,count 查询本身可能超时,要考虑缓存或近似值方案

最常被忽略的一点:Layui 的分页依赖 count 推导总页数,但它**不校验 data 数组长度是否等于 limit**。所以哪怕你返回 count: 1000 但 data 只有 2 条,它仍会显示“共 100 页”,只是后面全是空页。这个逻辑必须由后端保证一致。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui分页 layui c#

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2563

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5523

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6550

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6198

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

883

5

c#是什么意思
c#是什么意思

C#是一种通用的面向对象编程语言,它在.NET框架上运行,可用于开发各种类型的应用程序。本专题为大家提供c#相关的各种文章、以及下载和课程。

2023.08.08

1012

5

什么是c#
什么是c#

C#(读作C Sharp)是一种现代的、通用的、面向对象的编程语言。它由微软公司开发,于2000年首次发布,主要用于开发Windows桌面应用程序、Web应用程序、移动应用程序以及游戏开发等领域。C#是一种类型安全和托管的编程语言,它结合了C++的强大性能和C语言的简单易学特点,并引入了许多新的特性和概念,如委托、属性、泛型和异步编程等,以提高开发效率和代码可维护性。

2023.08.31

2911

3

C#中base关键字的用法
C#中base关键字的用法

在C#中,base关键字用于访问当前类的基类成员,这包括基类的字段、属性、方法、构造函数、索引器以及事件。想了解更多C#的相关内容,可以阅读本专题下面的文章。

2024.03.13

885

8

C#Task用法
C#Task用法

Task在C#中是用于表示异步操作的对象,它位于System.Threading.Tasks命名空间中。想了解更多C#中各种用法的相关内容,可以阅读本专题下面的文章。

2024.03.14

2615

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.2万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习