关于layui table回显以及选择下一页时记住上一页数据的问题

代码如下

<div class="layui-form-item"><label class="layui-form-label">选择商品</label><div class="layui-input-inline"><input type="text" name="keyword" id="keyword" placeholder="请输入关键字" class="layui-input"></div><div class="layui-input-inline"><input type="button" class="layui-btn" id="searchBtn" value="搜索"></div>
</div>
<div class="layui-form-item"><table id="resultTable" lay-filter="resultTable"></table>
</div>
<div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" onclick="add()">确定</button></div>
</div>
<input type="hidden" name="id" id="id" value="{$info.id}">
<input type="hidden" name="ids" id="ids" value="{$info.ids}"><script>let selectedData = []; //用于存储选中的数据let pageData = []; //后台返回的数据layui.use(['form', 'table'], function () {let form = layui.form,table = layui.table;//搜索按钮点击事件$('#searchBtn').on('click', function () {let keyword = $('#keyword').val();table.reload('#resultTable', {where: {keyword: keyword},page: {curr: 1}});});//之前选中的idlet ids = $('#ids').val();let beforeData = ids.split(",");beforeData.forEach(item => {selectedData.push(Number(item))})//渲染完成回调let myDone = function (res) {//找到框架渲染的表格let tbl = $('#resultTable').next('.layui-table-view');//记下当前页数据，Ajax 请求的数据集，对应你后端返回的数据字段pageData = res.data;let len = pageData.length;//遍历当前页数据，对比已选中项中的 idfor (let i = 0; i < len; i++) {if (selectedData.indexOf(pageData[i]['data_id']) !== -1) {//目前版本没有任何与数据或表格 id 相关的标识，不太好搞，土办法选择它吧tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);}}//去掉全选按钮-(全选时 数据判断有问题 懒得搞 也不会存在全选的情况)$('th[data-field=0] div').replaceWith('<div class="layui-table-cell laytable-cell-5-0-0"><span>&nbsp;&nbsp;&nbsp;&ensp;</span></div>');//PS:table 中点击选择后会记录到 table.cache，没暴露出来，也不能 mytbl.renderForm('checkbox');//暂时只能这样渲染表单form.render('checkbox');};// 渲染表格table.render({elem: '#resultTable',id: '#resultTable',url: '',method: 'get',where: {keyword: ''}, //初始为空done: myDone,cols: [[{type: 'checkbox', width: '10%', align: 'center'},{field: 'data_id', title: 'ID', width: '30%', align: 'center'},{field: 'sku', title: 'SKU', width: '30%', align: 'center'},{field: 'name', title: '商品名称', width: '30%', align: 'center'},{field: 'customer_price', title: '商品价格', width: '30%', align: 'center'}]],page: true,limit: 10,limits: [10, 20, 30],});//监听复选框点击事件table.on('checkbox(resultTable)', function (obj) {//全选或单选数据集不一样//(目前不存在全选的情况-全选按钮被我去掉了-可以自己加上。全选的话,obj.type='all')let data = obj.type === 'one' ? [obj.data] : pageData;//遍历数据$.each(data, function (k, v) {if (obj.checked) {selectedData.push(obj.data.data_id);} else {selectedData = selectedData.filter(function (item) {return item !== obj.data.data_id;});}});});//表单提交window.add = function () {let id = $('#id').val();let name = $('#name').val();let brand_name = $('#brand_name').val();let image = $('#image').val();let begin_time = $('#begin_time').val();let end_time = $('#end_time').val();let num = $('#num').val();let remark = $('#remark').val();let selectedIds = selectedData.map(function (item) {return item;}).join(',');if (selectedIds === '') {layer.msg('请选择商品');return}layer.confirm('已选中的材料ID为:[' + selectedIds + '], 确定提交吗？', function () {$.post('/your_url', {id: id,name: name,brand_name: brand_name,image: image,begin_time: begin_time,end_time: end_time,num: num,remark: remark,ids: selectedIds}, function (res) {if (res.code === 200) {layer.alert(res.msg, {icon: 6}, function () {// 获得frame索引let index = parent.layer.getFrameIndex(window.name);//关闭当前frameparent.layer.close(index);parent.location.reload();});} else {layer.alert(res.msg, {icon: 5})}}, 'JSON');})}});
</script>

参考文章：Layui Table 分页记忆选中