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>