本文共 1571 字，大约阅读时间需要 5 分钟。

要查询表格中的数据首先需要一个表格才可以完成数据的查询，如果没有表格来装着数据，数据也不知道是干嘛的数据了，没有表格的数据也是一堆废数据吧，就算不是废数据，那也肯定是一堆乱数据，也是一堆没有办法让用户或者其他人看明白的，所以就需要创建一个表格把数据填到表格中，然后在表格中分类好数据，并说明天到里面的是什么数据，那样就可以让用户看的明明白白了，创建一个表格也不是有多难的事也是用代码就可以完成的，只需要在HTML代码部分建一个table来装数据就行了，然后再到table里面写数据就可以完成了。那么下面就先来创建一个表格。首先要再JavaScript中声明一个便量来存放表格，声明变量代码：var tab，只要写上table中的ID就可以了，然后因为这里是要用到layui模块的所以先是要初始化一下layui模块，初始化layui代码如下。记住这个一定不能少！！！否则发生异常
(初始化layui代码)

初始化layui的代码就只有这上面的几句代码，如果使用了layui这个模块那么就一定要记得加上上面初始化的代码，否则肯定会出现错误的，写好初始化代码之后就可以继续写创建表格的代码了，创建表格其实也是很简单的，只需要在表格中填写需要的内容即可，然后再请求控制器返回数据就可以显示数据到表格了，我这里就随便查询一些数据来测试这里的功能。
(创建表格的代码部分)

创建表格的代码其实并不多，这里先是要把HTML中写的table初始化，tabGrade这个是刚才在声明的变量名称，然后获取到HTML中的表格中起的ID，ID名其实是可以随意起的，只需要在一个项目中不重复就没有什么问题的，起ID也需要讲究命名规范，然后再需要获取到HTML中的ID，这个ID就在写HTML页面布局代码的时候建的ID，然后就是发送请求的数据接口了，数据接口其实就是一个地址来的，这里的地址表示是某个文件夹下面的某个控制器的某个方法，这里也是很简单的，然后就是到了表格里的表头部分了，表头部分其实就是相当于说明表格中的数据到底是那一类，起到了分类的作用，把数据分好，那样就可以让用户可以更好的理解了，一看就这道表格中的到底是什么数据，表头部分其实上面的图片已经说明了意思，这里可以根据需求来添加或者删除每个列，这就是这样做的好处，可以随便更改，做好表头后，还要尾部的一些工具，这个就是分页功能，分页代码就是page：后的代码，分页包含有指定每一页的行数，就是默认一页有多少行，还可以自定义每页的行数的选择项，可以想设置每页有多少行都是可以的，然后就是要传送数据到控制器，那样js部分就完成了。
接着就是到了控制器部分的代码，控制器的代码也是不多的，也就是要把数据查询出来然后把数据返回到页面就可以了。
(控制器部分代码)

控制器的代码其实就是需要把js部分代码的路径复制一下防止打错了，然后就需要在小括号里接受一下传过来的参数，如果需要用到分页查询，那么就要在小括号里传LayuiTablePage然后就到了查询数据的部分了，这里的查询是用了一个linq查询方法，这里查询到的数据需要用到排序，排序代码：orderby 然后后面就可以根据自己想要的来排序就可以了，这里有两种序，一种是顺序，一种是倒序，查询完数据后，然后需要查询一下刚刚查询出来的数据一共有多少条，也可以说查询一共有多少行，然后到了分页查询这一部分，这里就是需要从SYS_Grade这个表中查询年级的信息，查询有多少条并转为list格式，然后new一个列表来封装表格所需要的数据，count就是总行数，等于后面的就是上面查询出来的总行数，data就是上面分页查询出来的信息，最后把数据return Json返回到页面就完成了。

完成后的表格就是上图这个样子了，修改和删除按钮我这里就不写了，这样就完成了。