ASP.NET MVC+Layui数据分页的实现和说明
46 浏览量
2021-01-08
16:07:53
上传
评论 3
收藏 203KB PDF 举报
ASP.NET MVC+Layui数据分页的实现和说明数据分页的实现和说明
前言前言
在学习过程中，因为对前端开发并不是很深入，学习的前端框架也很少在学习过程中，因为对前端开发并不是很深入，学习的前端框架也很少:Bootstrap、、Echarts、、EasyUI等。当接触到等。当接触到Layui时，认识到它是一套强大的模块化前端框架，使用时，认识到它是一套强大的模块化前端框架，使用
Layui提供的各种组件，可以帮助我们迅速搭建前端界面。对于一些非专业前端开发者、服务端开发者、以及小型后台管理系统开发者来说，提供的各种组件，可以帮助我们迅速搭建前端界面。对于一些非专业前端开发者、服务端开发者、以及小型后台管理系统开发者来说，Layui还是比较合适的。它的上手非常还是比较合适的。它的上手非常
容易，官方容易，官方API也十分详细，但是在我初次使用这个框架的时候，还是遇到了很多坑，一个个踩过之后才能完美避坑。也十分详细，但是在我初次使用这个框架的时候，还是遇到了很多坑，一个个踩过之后才能完美避坑。
这里记录下使用这里记录下使用Layui对数据进行分页展示的实现对数据进行分页展示的实现
前端前端:Layui框架框架 后台后台:ASP.NET MVC
效果图效果图:(注：数据均为虚构，仅做测试用注：数据均为虚构，仅做测试用!)
前端代码前端代码:
一、引入一、引入CSS和和JS文件文件
二、数据表格部分二、数据表格部分
获取选中行数据
获取选中数目
验证是否全选
查看
编辑
删除
官方实例官方实例:
说明说明:官方实例上此种数据表格的写法跟我的不一样。因为官方实例上此种数据表格的写法跟我的不一样。因为Layui有三种渲染方式有三种渲染方式(自动渲染，方法渲染，静态表格转化自动渲染，方法渲染，静态表格转化)，我个人也同意，我个人也同意Layui作者的看法，使用方法渲染使页面作者的看法，使用方法渲染使页面
DOM简单，更专注于写简单，更专注于写JS。所以我这里进行了改动，将表头绑定放到。所以我这里进行了改动，将表头绑定放到table.render()的的cols参数中。参数中。
三、三、JS部分部分(核心核心)
table.reader()表格渲染核心参数说明表格渲染核心参数说明:
elem：指定数据表格元素选择器（推荐：指定数据表格元素选择器（推荐id选择器）选择器）
url:异步数据接口地址异步数据接口地址 (向后台请求数据向后台请求数据)
cols:表头设置表头设置 [field:字段名，字段名，sort:是否排序，是否排序，title:显示文本内容，显示文本内容，fixed：固定列。可选：固定列。可选left/right]
page:true/false(是否开启分页是否开启分页) 还可以传入一个还可以传入一个object类型类型 [以后会使用以后会使用]
limit:一页显示几条数据一页显示几条数据
limits:传一个数组，指定每页条数的选择项传一个数组，指定每页条数的选择项
layui.use('table', function () {
var table = layui.table;//实例化layui 表格
//执行表格渲染 方法化渲染 推荐
table.render({
elem: '#idTest' //指定原始表格元素选择器（推荐id选择器）
评论0
最新资源