BootstrapTable 和layui获取当前页、数据刷新后留在当前页

使用BootstrapTable组件进行开发,开发过程中会经常遇到这样的需求:

     table分页后,对某页中的某条数据进行处理后(编辑,更新等等之后),刷新表格,为了保证table的实时正确性,先进行table的destroy,然后获取新建table并获取数据,需要定位到操作当前记录的对应页码,默认使用window.reload时候会跳到最开始的第一页,pageNumber会重置为1,也就是会跳回至首页。

这里有两种办法:

 1, refresh:刷新表格数据,可以加入参数url指定请求发向的url(可以是一个新的),silent:true时静默更新,query:{} 可以指出一些新的ajax请求时的参数。

$('#bootStrapTableId').bootStrapTable('refresh');

2,获取当前table显示的页码,也就是当前table分页所显示的第几页,通过对表格数据处理后的回调函数中加入table的当夜页码,从而让table在destroy之后,以给定的显示页码进行渲染数据:

$('#bootStrapTableId').bootStrapTable('getOptions').pageNumber;
 

注:getOptions:获取表格的一些基本属性,返回一个object,key有像conlumns,data,sortOrder,class这些很多属性,不清楚有哪些属性的,可以控制台console一下看看    

上述总结的参考出处:https://blog.csdn.net/qq_31302091/article/details/80894940

 

layui - 重载和刷新表格时保持在当前页码 - 获取当前数据所在的页码 和 显示条数

$(".layui-laypage-em").next().html(); //当前页码值

$(".layui-laypage-limits").find("option:selected").val() //分页数目

一.表格重载时

layui.use(['element', 'table', 'util'], function () {
        var table = layui.table,
            $ = layui.jquery,
            element = layui.element,
            util = layui.util;
        // 表格搜索
        // 回车提交搜索条件
        document.onkeydown = function (e) {
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which;
            if (code == 13 || code == 108) {
                $("button[data-type='reload']").click(); // #chk_match 是你 提交按钮的ID
            }
        }
 
        /* 接口数据 :搜索/添加*/
        var active = {
            /* 重载 */
            reload: function () {
                var customerName = $('#customerName')
                //执行重载 为表格属性中的id,不是标签中的id
                table.reload('lookDetail', {   //方法渲染表格里的属性 ID
                    page: {
                      curr: $(".layui-laypage-em").next().html()  //主要代码行
                    },
                    where: {
                        customerName: customerName.val() ? customerName.val() : ''
                    }
                });
            },
            reset : function(){
                /*重置搜索条件*/
                $('#customerName').val('');
            }
        };
        $('.layui-input-inline .layui-btn-normal').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
 })

二.删除时的代码,当前页刷新表格的写法

function del(url, userId,tableId) {
        $.ajax({
          url: url + userId,
          type: "delete",
          contentType: "application/json", //设置请求参数类型为json字符串
          dataType: "json",
          success: function (res) {
            if (res.status == 200) {
              layer.msg("删除成功", {
                icon: 6
              });
              layui.table.reload(tableId,{page:{curr:$(".layui-laypage-em").next().html()}})   //这行时在当前页刷新表格的写法
            } else {
              layer.msg("删除失败", {
                icon: 5
              });
            }
          }
        });
      }
三.在子页面刷新父页面,保持在当前页

var obj = {};
      form.on('submit(component-form-element)', function (data) {
        obj.dataFilesList = fileList.dataFilesList
        obj.sysUserCertificate = data.field
        // var obj = {
        //   "sysUserCertificate": {
        //     data
        //   },
        //   dataFilesList
        // };
        $.ajax({
          url: "/personnel/certificate",
          type: "post",
          contentType: "application/json", //设置请求参数类型为json字符串
          dataType: "json",
          data: JSON.stringify(obj),
          success: function (res) {
            var index = parent.layer.getFrameIndex(window.name); /* 先得到当前iframe层的索引 */
            if (res.status == 200) {
              parent.layui.table.reload('licenceReload',{page:{curr:$(".layui-laypage-em").next().html()}});   //主要代码
              parent.layer.close(index); //再执行关闭
              parent.layer.msg("添加成功", {
                icon: 6
              });
            } else {
              parent.layer.msg(res.msg, {
                icon: 5
              });
            }
          }
        })
        return false;
      });

上述参考博文出处:https://blog.csdn.net/COCOLI_BK/article/details/88417605

你可能感兴趣的:(前端开发jquery)