Layui数据表格的渲染&&数据的单表查询
Layui数据表格的渲染&&数据的单表查询
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:VS、单表查询
作者:#33
撰写时间:撰写时间:2019年04月06日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
本学期学习MVC的知识:引入layui插件、渲染tabStudent表格:
、在准备好的项目中创建表格,首先在项目中引入layui插件:
、再在视图中引入使用:
<script src="~/Plugins/layui/layui.all.js"></script>
下图制作的表格:
在<script>标签下进行渲染:
先声明要渲染的表格、需要的layuitable;
var tabStudent;
var layuiTable;
然后在jQuery的方法里面写加载layui表格的方法,渲染表格后在控制器中写学生表的查询方法:
$(document).ready(function () { layui.use(('table'), function () {········layui.use()加载'table'内置模块 layuiTable = layui.table;·················数据表格模块 表格初始化 tabAcademe = layuiTable.render({············表格渲染 elem: '#tabStudent',··················需要渲染的表格ID名 ···········控制器中查询方法的路径(数据接口)············· url: '/CollegeCXB/SelectStudent', cols: [[························渲染表格的头部部分内容 { title: '选择', type: 'radio', align: 'center' },··type: '',title的类型 { title: '序号', type: 'numbers', align: 'center' },··field: '',查询的字段 { title: '姓名', field: 'StudentName', align: 'center' }, { title: '性别', field: 'StudentSex', align: 'center' }, { title: '身份证号', field: 'StudentIDNum', align: 'center' }, { title: '学号', field: 'StudentNumber', align: 'center' }, { title: '操作', templet: "", align: 'center' } ···········(align: '',文本对齐方式)·················· ···········templet: "",自定义列模板的方法··············· ]], page: {·······················表格数据的分页 limit: 10,····················每页显示的条数 limits: [10, 20, 30, 50, 60, 70, 80,]······每页条数的选择项 } }); }); |
控制器方法:定义分页的实体类LayuiTablePage public ActionResult SelectStudent(LayuiTablePage layuiTablePage) { var listStudent = (from tbStudent in myModel.PW_Student select tbStudent).ToList();····查询学生表所有数据 int totals = listStudent.Count();··········学生表数据的总条数 ············根据学生ID进行降序排序·················· listStudent = listStudent.OrderByDescending(m=>m.studentID) .Skip(layuiTablePage.GetStartIndex()) .Take(layuiTablePage.limit).ToList(); ············实例化学生表的模型实体·················· LayuiTableData<PW_Student> layuiTable = new LayuiTableData<PW_Student>(); ···········赋值给listStudent和totals·················· layuiTable.data = listStudent; layuiTable.count = totals; ··返回的数据layuiTable JsonRequestBehavior.AllowGet 允许客户端可以进行访问··· return Json(layuiTable, JsonRequestBehavior.AllowGet); } |