layui的数据表格 跨页复选框选择 自定义分页
<!doctype html>
<html lang="en">
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 主要内容 -->
<div class="layuimini-main">
<div class="layui-table-box">
<table class="layui-hide" id="test" lay-filter="test">
</table>
<div id="page"></div>
</div>
</div>
</body>
<script>
var layui_table_id = 'table_data';
var table, laypage;
var select_type = 'checkbox';
var checked_data = new Map();
var checked_ids = [];
var current_page = 0;
layui.use(['table', 'laypage', 'layer'], function () {
table = layui.table;
laypage = layui.laypage;
var layer = layui.layer;
var limit = 10;
var limits = [limit, 10, 20, 30, 40, 50];
$.unique(limits);
var url_params = $('.layui-form').serialize();
table.render({
elem: '#test'
, id: layui_table_id
, method: 'post'
, url: '/business/user/list?' + url_params
, page: false
//, limit: limit
, response: {
statusCode: 1 //规定成功的状态码，默认：0
}
, cols: [[
{type: select_type, fixed: 'left'}
, {field: 'id', width: 60, title: 'ID', align: 'center', sort: false}
, {field: 'name', width: 160, title: '姓名', align: 'center', sort: false}
, {field: 'age', width: 160, title: '年龄', align: 'center', sort: false}
, {field: '', width: 150, title: '操作', align: 'center', templet: setOperate}
]]
, done: function (res, curr, count) {
current_page = res.current_page;
limit = res.per_page;
// 判断该条数据是否选中
for (var i = 0, len = res['data'].length; i < len; i++) {
if (in_array(res['data'][i]['id'], checked_ids)) {
//这句才是真正选中，通过设置关键字LAY_CHECKED为true选中，这里只对第一行选中
res.data[i]["LAY_CHECKED"] = 'true';
//下面三句是通过更改css来实现选中的效果
var index = res.data[i]['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
$('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
}
}
// 分页渲染
layuiPage(count, limit, limits);
}
});
/**
* 分页渲染
*/
function layuiPage(count, limit, limits) {
laypage.render({
elem: 'page'
, count: count //数据总数，从服务端得到
, limit: limit
, limits: limits
, hash: 'p'
, curr: location.hash.replace('#!p=', '') //获取起始页
, layout: ['prev', 'page', 'next', 'limit', 'skip', 'count']
, jump: function (obj, first) {
// obj包含了当前分页的所有参数，比如：
// console.log(obj); //得到当前页，以便向服务端请求对应页的数据。
// console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
var data = getFormObj();
data['page'] = obj.curr;
data['perPage'] = obj.limit;
limit = obj.limit;
let checkStatus = table.checkStatus(layui_table_id);
let checkbox_data = checkStatus.data;
checked_data.set(current_page, checkbox_data);
for (var i = 0, len = checkbox_data.length; i < len; i++) {
checked_ids.push(checkbox_data[i]['id']);
}
table.reload(layui_table_id, {
page: false
, where: data
}, 'data'); //只重载数据
} else {
//checked_data = new Map();
//checked_ids=[];
}
}
});
}
//设置操作按钮
function setOperate(data) {
var id = data.id;
var btn = "";
btn += '<a class="layui-btn layui-btn-xs" lay-event="detail" >查看</a>';
//btn += '<a class="layui-btn layui-btn-xs" lay-event="upload" >上传</a>';
return btn;
}
//监听行工具事件
table.on('tool(test)', function (obj) {
var url = '/business/user/detail';
let data = obj.data;
if (obj.event === 'detail') {
var index = layer.open({
type: 2,
content: url + "?id=" + data.id,
area: ['80%', '80%'],
maxmin: true,
});
//layer.full(index);
}
});
});
/**
* 搜索
* @author code.cent123.com
* @date 2020-07-07
*/
$("#goSearch").click(function () {
var url_params = $('.layui-form').serialize();
var url = '/business/user/list';
goSearch(url, '.layui-form');
});
/**
* 搜索方法
*/
function goSearch(request_url, ele) {
checked_data = new Map();
checked_ids = [];
ele = ele || ".layui-form";
let data = $(ele).serialize();
ajaxRequest(request_url, function () {
table.reload(layui_table_id, {
page: false
, where: getFormObj(ele)
}, 'data'); //只重载数据
}, false, data, 'POST', true, false);
}
/**
* 确定
* @author code.cent123.com
*/
function getCheckedData() {
let checkStatus = table.checkStatus(layui_table_id);
let checkbox_data = checkStatus.data;
checked_data.set(current_page, checkbox_data);
var new_checkbox_data = [];
var m = 0;
checked_data.forEach(function (item, index) {
for (var j = 0, len2 = item.length; j < len2; j++) {
new_checkbox_data[m] = item[j];
m++;
}
});
return new_checkbox_data
}
/**
* 判断数组是否存在某个值
* @param search
* @param array
* @returns {boolean}
*/
function in_array(search, array) {
for (var i in array) {
if (array[i] == search) {
return true;
}
}
return false;
}
/**
* form 数组转对象 解决table $(ele).serialize() 解析问题
* @param ele 可选参数 默认 ".layui-form"
* @author code.cent123.com
*/
function getFormObj(ele) {
ele = ele || ".layui-form";
var arr = $(ele).serializeArray();
var obj = {};
arr.map(function (e, item) {
obj[e.name] = e.value;
});
return obj;
}
</script>
</html>
