<!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>
5538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
