Layui插件 Table 数据表格文档

最新推荐文章于 2025-04-16 13:26:48 发布

原创最新推荐文章于 2025-04-16 13:26:48 发布

· 957 阅读

1 ·

版权

本文详细介绍了如何使用Layui前端框架进行数据表格的创建与分页功能的实现，包括HTML结构设置、JavaScript渲染代码及控制器配置，适合界面快速开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


开发工具与关键技术：Microsoft Visual Studio C#

作者：萧然

撰写时间：2020年8月 5日

今天我们引入了一个插件叫做Layui,

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

我们常用到的功能主要是弹出层、日期与时间选择、分页、数据表格。

这里我即将介绍下数据表格以及分页。

一、
数据表格

首先要用到插件就得先下载到项目中然后再到需要用的地方引入

样式：

Js:

1、创建HTML

<div>

      <table id="tabStudent" class="layui-hide" layui-filter="tabStudent"></table>

 </div>

2、初始化渲染

这里我们使用方法渲染还有两种是自动渲染和转换静态表格的渲染方式

上面已经创建了表格接下来

声明全局以便后期调用

var tabStudent，layuiTable;

//执行渲染

$(function () {jquery的页面加载

     layui.use('table',          要用到的模块，多的话可用数组['table', 'layer']

           function () {

               layuiTable =layui.table;  以便后期调用重载



               //初始化表格

               tabStudent =layuiTable.render({

                   elem: "#tabStudent",  要渲染的表格ID

                   url: "/Main/chaXun",  请求数据的路由

                   cols: [

                       [ //设置表头。值是一个二维数组

                                      type设定列类型，title设定标题名称，align单元格排列方式，

field设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识

templet自定义列模板 width：设置列的宽度

{ type: ‘numbers’, title: ‘序号’, align: ‘conter’, },numbers（序号列）

                        { title: '学生编号', field: 'studentNumber', align: 'center' },

                        { title: '学生姓名', field: 'studentName', align: 'center' },

                        { title: '班级', field: 'calssName', align: 'center' },

                        { title: '性别', field: 'studentSex', align: 'center' },

                        { title: '手机号', field: 'telephone', align: 'center' },

                        { title: '身份证号', field: 'studentIDNum', align: 'center' },

                        { title: '图片', templet: customUserPicture, width: 80 }, 

                        { title: '操作', align: 'center', templet: modifyState },

                       ]

                   ],

                   page: { 开启分页

                       limit: 5, 每页显示的条数

                       limits:[5,10,15,20,25,40]  每页条数的选择项

                   }

               });

           }

       );

    });

二、
分页

视图配置好后我们转向控制器

首先要创建两个个实例一个用来来接收分页数据格式，一个获取数据和状态
在这里插入图片描述