Layui数据表格的渲染&&数据的单表查询

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：VS、单表查询

作者：#33

撰写时间：撰写时间：2019年04月06日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

本学期学习MVC的知识：引入layui插件、渲染tabStudent表格:

、在准备好的项目中创建表格，首先在项目中引入layui插件：

、再在视图中引入使用：

下图制作的表格：

在<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);

}