Layui.Table渲染 (经典)

一． 如何把数据的显示给人们看更清楚一点呢！第一可以靠图表，第二可以靠表格，而接下来我们 会简介怎样渲染出一个表格。
1.渲染表格，第一肯定少不了layui.js的插件，要在《body》 《script src="~/Plugins/layui/layui.js"》
《/script》 《/body》 引用一下，同时layui.js是有两种js的，第一种是layui.all.js这种是一种直接使用无需渲染，第二种layui.js是一种必须要渲染出来才可以使用的，而layui.js是对为了应对弹出层的问题，来使用的，而我们最好一般是使用layui.js最好，因为我们也不知道什么时候使用到弹出层。
2. 首先我们要知道渲染表格接受的返回的参数是什么，然后在控制器那边从数据库查询出来你需要的数据，再放进表格里面去。
3. 渲染表格参数接受的就两个，总的行数(cout) 和 数据(data),而在表格涉及到分页，而数据在数据库里面的是不会进行分页的，我们还有对数据进行分页，这时我们要创建一个类，拿来分页的，如图1，在(page-1)是因为下标和是从零开始的，再把data进行.Skik(GetStartIndex())切割，.Take(limit)获取每一页的条数。

图1 分页

4.总的行数 (cout)，首先你就要进行到数据库里查询出总的数据了，比如图2，在图2里只涉及一张表查询了，那就是学校表了，如果你渲染出来的表格是同时涉及几张表格，那你就要在查询的是时候要进行一个连表查询了比如：A学院表 ，B班级表, JOIN B班级表 in myModels班级表 on A学院表.主键ID equals B班级表.A表.外键ID ,这就是一个连表的简单思路了

图2 表头

5．在查询完后，一定要记得排序，因为排序可以在我们每一次新增数据的时候可以在第一列，就可以看到自己新增的数据了，Orderby这就是排序的关键字了。
6.以上都可以就可以把数据进行返回了，返回的数据就是，count() 就是刚才查询出的数据了，data（）就是你进行分页后的数据了。

二． layui表格创建

1. 数据有了，接下来就是表格的创建了，在表格里是有一些重要的参数的，而且是必填的参数：
   01.elem：指向table，这参数首先就要创建一个table,然后把table的ID给到elem，elem参数相当需要一个画板，而画板就是table，方法渲染一定要填的参数。
   02.url ：异步数据接口的参数，这参数就是数据接口了，就是刚才在控制器查询出来的数据，把查询出来的数据方法名给到他就行了，方法渲染一定要填的参数。
   03 . cols：可以设置表头的名称的参数。值则是一个二维数组来的，这就是表头了，你表头需要什么名称都可以给到他，注意点：cols是一个二维数据，一定在写cols的格式时注意是两个中括号，括起来的，如 cols:[[]]，方法渲染方式必填。

2. 必填的参数已经在上面了，但是还有一些参数也是比较重要的：
   01 . templet：这个参数可以解决逻辑性的参数，这是一个可以让你实现调用一个封装的方法的参数了，比如你在外面封装了一个按钮的封装的方法，想给到渲染的表格里面，就可以调用此参数了。
   02 . page:是否设置分页(默认值是：false)，这是可以涉及分页，也可以涉及重定向的参数，什么是重定向大家应该也知道，比如有五页，而你在第三页开始查询一个数据，在查询的时候就可以涉及重定向了，因为你在第三页查询，有时浏览器只会在第三页查，而没有在这五页数据里进行查询，这就导致出错，在page里还可以涉及分页，如图3，page：{limit: 每一页的显示条数，limits:页数选择器}，limit就是当前的页数的数据的条数了，你可以自己设计，比如给个10，就会在每一页都显示10条数据了，而limits，就是可以在页面上再次设置条数比如，limits:[10,15,20] ，就可以在页面上选择了，如图3的右边的下拉框了，这就是layui.js的好处了。

   图 3 分页条

   

3. layui.use[ ]是一个初始化你需要的工具了，比如提示层，而cols:[[]],type：type：表头样式，fixed:位置设置，title:设置表头名，field:设置字段名，但是一定要和数据库的名称一致，就像比如第一列是放学生名称，那学生名称ID就要可数据库里面的一致，如果你放一个主键ID里面，可以设置一个hide:true,这个就是把主键隐藏起来了，这样就不怕别人知道你的主键的值了，templet：就是刚才所说的在逻辑处理的参数了，page的参数就是刚才解析过的分页的参数了，可以设置按钮，以上就可以渲染出表格了。

图4 渲染表格

4. 图5.就是渲染出来的表格了。

图5 表格

总结：

1.在这次渲染表格里可以再一次提高了我对一个插件的运用可以更加的懂得去分析了，每一个的插件的使用我们应该首先去了解每一个插件的功能使用，和参数的作用。
2. 还同时了解到对一个表格需要的查询到数据的了解，就是查询数据的语句，还可以对数据进行一
个分页，返回。