# 管理员列表 > 单独做管理员的列表显示，非常简单。所以在这里呢咱们重点介绍一下`Layui`数据表格的应用。 ## Layui数据表格的应用 > 根据不同的场景需求，layui中提供了三种数据表格的渲染方式，在这里呢，咱们使用`转换静态表格`的方式来实现。这种方式，在实际的开发过程中，用的比较少，一般会选用另外两种。但是这种试在个别场景下非常实用。 > ## \[注意\]在使用layui之前必须先引入`layui`框架 ### 1\. 按照之前的方式，实际管理员列表 ### 2\. 将现在表格列表转换为layui数据表格 > 在转换时，要注意以下事项： #### 1\. 实现表格的转换 > 实现数据表格转换时，一定要注意一下下面几点 ##### 1\. 原始表格`table`标签中加入`lay-filter`，并设置其属性值 ##### 2\. 原始表格头信息要是如下格式 ~~~ <table> <thead> <tr> <th lay-data="field:'字段名' "></th> </tr> ...... ~~~ > 必须含有`thead`和`th`，同时th中必须有'lay-data'属性 ##### 3\. js实现表格的渲染 ~~~ var table; layui.use('table', function(){ table= layui.table; //转换静态表格 table.init('mytable', { id:"mytable" ,height: 315 //设置高度 }); }); ~~~ > 通过上面的代码就可以实现最基本表格的转换，在这里注意，这里把table设置成了全局变理，目前是因为后面在其它地方有用到它，如果放到了`layui.use`内的话，就没有办法在外面进行调用。 ##### 4\. 静态表格实现数据分页 > 在这里既然使用了`layui`的数据表格的分页功能咱们也使用`layui`来实现。在这里咱们要参考`layui数据表格`中的配置项的设置。官方文档中有详情说明。 第一步：开启分页功能 > 在渲染时加入，`page`选项 ~~~ var table; layui.use('table', function(){ table= layui.table; //转换静态表格 table.init('mytable', { id:"mytable" ,height: 315 //设置高度 ,limit:1 ,page:true }); }); ~~~ 效果：  > 这里分页导航出来了，但是并不能正确的实现分页。出现这个情况主要是因为，在这里咱们是静态表格转换，所以这里的分页导航数据来自表格的数据，在控制器中取数据时，咱们用的是分页，所以在这里表格中显示的只是一页的数据，所以不能实现分页。 第二步：调整控制器中表格的获取方式 \[success\]在这里将所有的管理员数据分配到表格中，也就是说咱们在获取数据时不再进行分页，直接获了所以的管理员数据。然后在表格中进行显示。 调整后效果如下  > 这时就可以实现了。