以我刚入门正在学习的一个重庆邮电大学的一个项目来演示
运行起来打开页面查看查询到的数据返回到页面的数据表格
学院信息维护页面的数据查询以及显示到页面中!
第一步:在javascript中使用layui这个插件(plugin)来创建一个动态数据表(table),申明layer和layuiTable这两个变量,方便全局变量使用,再申明一个tabAcademe存放表格!
引入jquery-3.2.1插件,在javascript中的jquery代码块中使用layui插件来创建一个table,在jquery代码块中在先使用layui模块,然后在layui模块中说明layer和layuiTable等于layui的layer和table
初始化tabAcademe表格,render是layui插件中初始化表格的一个方法,elem获取html那边table的ID,url是数据查询的接口,连接控制器,
cols表头这段代码可以layui官网中查询出来粘贴复制,然后修改成自己想要的一个表头。
type:’radio’是单选框,type:’checkbox’是复选框,fixed:’left’是把选框这个列固定在左边,title是一个标题可以随便更改,field:’XXX’这个是对应html的input标签的name,这个hide:true是将这个列设为隐藏列,对应html的一个隐藏inoput
显示出来的数据需要和数据库那边相对应
最后面这个title则是一个固定在右边的操作按钮列,width:160和align:’center’是给定这个列的宽度为160个像素和设置按钮在这个列中居中,templet:setOperate是设置自定义按钮的方法
这个自定定义操作按钮系列需要申明一个数据的ID,和一个返回按钮,这个返回按钮的点击事件中拼接是一个参数
最后再写一个page分页显示数据
limit指定每页显示的条数
limits每页条数的选择项
第二步:到控制器写查询数据的方法
SelectAcademeAll这个方法对应初始化表格url的方法
LayuiTablePage是一个实体类,需要到控制器顶部using引用实体类这个文件
这个LayuiTablePage实体类有page当前页面、limit每页数据量、GetStartIndex分页开始序号、GetEndIndex分页结束序号
使用linq的方法查询数据
不知道数据是什么类型就使用var,var是匿名数据类型,它在编译的时候C#会把它翻译成具体的数据类型。查询学院from 自定义一个表名tbAcademe,数据来自model中的学院表,model需要在控制器顶部引入
和实例化
不需要where条件,然后根据学院ID排序orderby一下查询出来的学院数据,select是查询
计算一下查询出来的学院数据的总行数
学院数据是int类型所以用int,也可以用var,但是知道具体类型还是用具体类型比较好
使用linq查询之后分页查询数据
List是列表,把查询的学院数据放到一个列表中,数据来源于linq查询出来的数据,Skip是从哪里开始查询,layuiTablePage.GetStartIndex()是之前引入的一个实体类从分页开始处查询,Take是跳转到哪里,layuiTablePage.limit是跳转到哪一页数据,ToList()是查询多条数据,这是查询一整个学校有多少学院所以要使用ToList(),如果只查询一条数据用Single()就可以了
引入一个LayuiTableDate实体类,LayuiTableDate实体类中有数据状态码(可以不设置)、状态信息(可以不设置)、总行数(必须设置)、数据(必须)
实例化new一下这个LayuiTableDate<SYS_Academe>,然后把计算出来的数据的总行数放进LayuiTableDate实体类中的count和把分页查询的数据放到LayuiTableDate实体类中的data,最后把封装好的数据返回到页面显示出来