layui实现table加载的示例代码

js实现：

layui.use(['table','form'],

function()

{

$

=

layui.jquery

table

=

layui.table

tableIns

=

initTable()

})

//加载列表

function

initTable(){

//

执行渲染

tableIns

=

table.render({

id:

'idTest',

elem

:

'#deviceTable',

//

指定原始表格元素选择器（推荐id选择器）

size:

'lg',

height

:

'full-20',

//

容器高度

url

:

'/csCloud-admin/deviceController/getDeviceList.do',

where:

{

'orgId':$("#orgId").val(),

'coldNum':$("#coldNum").val(),

'devType':$("#devType").val(),

'isUsed':$("#isUsedId").val()

},

method

:

'post',

cols

:

[

[

//

标题栏

{

field

:

'rownum',

title

:

'序号',

width

:

100,

sort

:

true

},

{

field

:

'devNum',

title

:

'设备编号',

width

:

200

},

{

field

:

'devAlias',

title

:

'设备别名',

width

:

100

},

{

field

:

'devTypeVal',

title

:

'设备类型',

width

:

100

},

{

field

:

'devModel',

title

:

'设备型号',

width

:

100

},

{

field

:

'stateVal',

title

:

'设备状态',

width

:

100

},

{

field

:

'coldNum',

title

:

'冷库编号',

width

:

100

},

{

field

:

'orgName',

title

:

'所属机构',

width

:

300

},

{

field

:

'isUsedValue',

title

:

'状态',

width

:

100

},

{

fixed

:

'right',

width

:

300,

align:'center',

toolbar

:

'#barDemo'

}

]

],

//

设置表头

page

:

true,

limits

:

[

10,30,

60,

90,

150,

300

],

limit

:

10

})

return

tableIns

}

jsp实现：

<div

class="layui-fluid">

<div

class="layui-row">

<div

class="layui-col-lg12">

<table

id="deviceTable"></table>

</div>

</div>

</div>

以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:layui的table单击行勾选checkbox功能方法layui实现点击按钮给table添加一行layui结合form,table的全选、反选v1.0示例讲解

一、 我们在使用layui.table前必须初始化layui模块，用到的模块一般常用的有两种 layer（d出层）和 table（数据表格），然后用function进行模快的初始化，当然在初始化模块之前我们必须声明几个全局变量，

声明两个变量（layer和layuiTable）来接收模块的数据,并且保存layui模块以便全局使用。

声明一个变量（tabStudent）来放置表格数据。

二、开始初始化模块

首先我们在加载事件里面将声明的那两个变量来接收layer（d出层）和 table（数据表格）

三、接下来就是初始化表格，初始化得到的数据就放入刚刚声明的全局变量（tabStudent）里面

四、在然后就是写初始化表格里面的参数：

将表格的ID放入elem(指定原始table容器的选择器或DOM，方法渲染方式必填)里面

查询方法的路径(url: 异步数据接口相关参数，url参数为必填项)

设置表头（cols） 将表格的结构放入

例：

需要写一个方法来设置最后一列来返回设置在最后一列所设置的 *** 作按钮，比如当我们要在 *** 作那行设置一个修改和删除的按钮的时候：

Onclick是点击事件

4. 设置表格每页的行数：page（开启分页）：{

limit：n (指定每页显示的条数)

limits: [ 5,10,20,n] (每页条数的选择项)}

5. 当你需要表格的一些“列显示隐藏” “打印” 或者 “导出” 功能的时候你就必须设置开启表格的工具栏

参数toolbar的作用便是开启表格头部工具栏区域，该参数支持4种类型值：

 toolbar: ’#toolbarDemo(注：该代码取的是自定义好的模板的ID 该模板可以放在页面的任意位置)’ 指定自定义工具栏模板选择器

 toolbar: ’xxx’ 直接传入工具栏模板字符

 toolbar: true 仅开启工具栏，不显示左侧模板

 toolbar: ‘default ’ 让工具栏左侧显示默认的内置模板

该参数的默认值为false.

6. 设置表格的图标：

defaultToolbar:可以自由配置头部工具右侧的图标，数组可以3种：

defaultToolbar :[‘filter’]:显示筛选图标

defaultToolbar [‘exports’]：显示导出图标

defaultToolbar [‘print’]：显示打印图标

这些值也可以根据排序的顺序来显示排版图标，如defaultToolbar:[‘filter’,’exports’,’print’

7. Table容器的默认宽度是跟随它的父元素铺满的，你也可以设定一个固定的值（width），当容器中的内容超出了该宽度时，会自动出现横向滚动条。甚至还可以设置表格的高（height）。

8. 如果你点击一个切换分页时不知道它是否为加载状态，则你可以添加loading这个参数，它的作用就是是否显示加载条，默认值是为true，如果设置false则在切换分页时不会出现加载条（注：该参数只是适于url参数开启的方式）。

五、然后就是在控制器为表格添加数据，数据添加完成后将其方法名称放入url里面。

---