<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
<
title
>layui在线调试</
title
>
<
link
rel
=
"stylesheet"
href
=
"../src/css/layui.css?t=1535898708529"
media
=
"all"
>
<
style
>
body {
margin: 10px;
}
.demo-carousel {
height: 200px;
line-height: 200px;
text-align: center;
}
</
style
>
</
head
>
<
body
>
<
table
class
=
"layui-hide"
id
=
"test"
lay-filter
=
"test"
></
table
>
<
script
src
=
"../src/layui.js?t=1535898708529"
></
script
>
<
script
>
layui.use(['table'], function (table) {
var dataTemp = [
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 10},
{id: 11},
{id: 12},
{id: 13},
{id: 5},
{id: 6},
{id: 7},
{id: 8},
{id: 9},
{id: 14},
{id: 15}
];
//执行一个 table 实例
var tableIns = table.render({
elem: '#test'
, height: 420
// ,url: '/demo/table/user/' //数据接口
, data: dataTemp
, title: '用户表'
, page: true //开启分页
, toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
, totalRow: true //开启合计行
, cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
, {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计:'}
, {field: 'username', title: '用户名', width: 80}
, {field: 'experience', title: '积分', width: 80, sort: true, totalRow: true}
, {field: 'sex', title: '性别', width: 80, sort: true}
, {field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
, {field: 'city', title: '城市', width: 150}
, {field: 'sign', title: '签名', width: 200}
, {field: 'classify', title: '职业', width: 100}
, {field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
, {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
]]
});
table.on('sort(test)', function (obj) {
// 对原始数据进行排序处理
var dataNew = obj.type ? layui.sort(dataTemp, obj.field, obj.type === 'desc') : dataTemp;
// reload表格
tableIns = table.reload('test', {
initSort: obj
, data: dataNew
, page: {
curr: 1
}
});
})
});
</
script
>
</
body
>