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