2020-11-19 解决bootstraptable 跳转返回后到原页问题

最新推荐文章于 2022-07-11 13:13:31 发布

鲸鱼姐

最新推荐文章于 2022-07-11 13:13:31 发布

阅读量1k

点赞数

分类专栏： bootstrap

原文链接：https://blog.csdn.net/qq_39628595/article/details/89257223?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

版权

bootstrap 专栏收录该内容

42 篇文章 7 订阅

订阅专栏

参考连接：https://blog.csdn.net/qq_39628595/article/details/89257223?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog

接下来上代码（主要部分的代码）

注意红色部分

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                用户列表<span id="a"></span>
            </h1>
        </section>
        <section class="content">
            <table id="dataGrid"></table>
        </section>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        initDataGrid()
    });
    $table = $("#dataGrid");
    function initDataGrid() {
        //pageNumber必须是纯数字 但js是弱类型语言，没有int这种类型
        //所以设置var num=1;这时num的值就是数字1，（不是字符串1）
        var pageSize = sessionStorage.getItem("pageSize");
        var pageNum = sessionStorage.getItem("pageNum");
        var num=1;
        num=pageNum==null?1:parseInt(pageNum);

        $table.bootstrapTable({
            url: '/user/getlist',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            //toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            //queryParams: queryParams,//传递参数（*）
            queryParamsType : "",
            queryParams : getParams,
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            queryParamsType: "limit",
            pageNumber: num,                    //初始化加载第一页，默认第一页，pageNumber必须是int类型
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 30, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索
            //silent:true,
            strictSearch: true,              
            showColumns: false,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "userid",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            visible: false,
            detailView: false,                   //是否显示父子表

            columns: [
                // { checkbox: true},
                {field: 'userid', title: '用户ID'}, {
                    field: 'username',//对应的实体类字段
                    title: '用户名'
                }, {
                    field: 'phone',//对应的实体类字段
                    title: '电话'
                }, {
                    field: 'usertype',//对应的实体类字段
                    title: '用户类型',
                    formatter: Utype
                }, {
                    field: 'userid',//对应的实体类字段
                    title: '操作',
                    //width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter
                }
            ],

           /* queryParams: function (params) {

                //这里的pageSize、pageNum必须和Controller改成一样的
                var temp = {

                    pageSize: params.limit,                         //页面大小
                    pageNum: (params.offset / params.limit) + 1,   //页码
                    // sort: params.sort,      //排序列名
                    // sortOrder: params.order //排位命令（desc，asc）
                };
                return temp;
            },*/

            responseHandler: function (res) {
                return {
                    rows: res.list,
                    total: res.total
                }
            },
            onLoadSuccess: function () {

            },
            onLoadError: function () {
                alert("数据加载失败！");
            },
            onDblClickRow: function (row, $element) {
                var id = row.ID;
                EditViewById(id, 'view');
            },

        });

       //alert( $table.bootstrapTable('getOptions').pageNumber)
    }

//添加操作按钮
    function actionFormatter(value, row, index) {
        var id = value;
        var result = "";
        result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"SeeViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span>查看</a>";
        result += "<a href='javascript:;' class='btn btn-xs blue'  οnclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span>编辑</a>";
        result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span>删除</a>";
        return result;

    }

//这里和上边注释掉的queryParams: function (params){}作用一样用来向后台传递参数
    function getParams(params) {
        //var param=$("input").val();
        //获取sessionStorage中param的value
        var param = sessionStorage.getItem("param");
        if(param!=null){
            param=param;
            //将param添加到搜索框中
            $("input").val(param);
        }else {
            //因为我的页面中只有一个input所以直接获取input的value
            param=$("input").val();
        }

        //获取sessionStorage
        var pageSize = sessionStorage.getItem("pageSize");
        var pageNum = sessionStorage.getItem("pageNum");
        var temp = {      //这里的pageSize、pageNum、search必须和Controller改成一样的
            pageSize:pageSize==null?params.limit:pageSize,                         //页面大小
            pageNum: pageNum==null?(params.offset / params.limit) + 1:pageNum,   //页码
      //在进行模糊查询的参数
            search:param
            // sort: params.sort,      //排序列名
            // sortOrder: params.order //排位命令（desc，asc）

        };
        //在sessionStorage中清除这三个数据
        sessionStorage.removeItem("pageSize");
        sessionStorage.removeItem("pageNum");
        sessionStorage.removeItem("param");
        return temp;
    }

    function Utype(value) {
        return value == 1 ? "会议管理员" : "普通用户";
    }
 
   //删除数据
    function DeleteByIds(index) {
        //$table.bootstrapTable('destroy');//先要将table销毁，否则会保留上次加载的内容
            //ajax 后台删除
            $.ajax({
                url : "/user/delete/" + index,
                type : "GET",
                success : function(result) {
                    if (result!= 9999) {
                        $table.bootstrapTable('refresh');//刷新当前表格数据
                    } else {
                        alert("删除失败，请稍后重试")
                    }
                }
            });
    }

//查看详细信息
    function SeeViewById(index) {
        var param=$("input").val();
        if(param!=null){
            param=param;
            sessionStorage.setItem("param", param);
        }else {
            param="";
        }
         //sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
         //类似于key，value
         //向sessionStorage中添加数据
         //sessionStorage介绍http://www.runoob.com/jsref/prop-win-sessionstorage.html
         //这个的作用是当页面跳转回来的时候列表页不会加载默认第一页，而是加载跳转之前所在的页面
         //例如现在从第2页跳转到“查看详细”页面，在返回的时候还是在第二页
        sessionStorage.setItem("pageSize", $table.bootstrapTable('getOptions').pageSize);
        sessionStorage.setItem("pageNum", $table.bootstrapTable('getOptions').pageNumber);
        
       window.location.href="/admin/user/see/"+ index;
    }


//逻辑同上
    function EditViewById(index) {
        var param=$("input").val();
        if(param!=null){
            param=param;
            sessionStorage.setItem("param", param);
        }else {
            param="";
        }
        sessionStorage.setItem("pageSize", $table.bootstrapTable('getOptions').pageSize);
        sessionStorage.setItem("pageNum", $table.bootstrapTable('getOptions').pageNumber);
        window.location.href="/admin/user/update/"+ index;
    }
</script>

</body>

//后台的分页代码

@RequestMapping(value = "user/getlist")
@ResponseBody
public PageInfo getall(Integer pageNum, Integer pageSize,@RequestParam("search") String search) {
    pageNum = pageNum == null ? 1 : pageNum;
    pageSize = pageSize == null ? 10 : pageSize;
    PageHelper.startPage(pageNum, pageSize);
    if(search.length()>0){
        List<Users> users = us.selectByUid(search,0);
        PageInfo pageInfo = new PageInfo(users);
        return pageInfo;
    }else {
        List<Users> users = us.getStateAndType(1, 0);
        PageInfo pageInfo = new PageInfo(users);
        return pageInfo;
    }


}

主要逻辑是点击“编辑”或“查看”时，将当前页面的页码、搜索框中的value值存到sessionStorage中，在“编辑”或“查看”页面返回时

列表页会加载initDataGrid()方法，此时将sessionStorage中的页数、搜索框中的value值取出，放进url中（完整的url：http://localhost:8080/user/getlist?pageSize=10&pageNum=2&search=2&_=1555077861561）

想了很多方法最后感觉这个比较好

如有问题请多多指正

-BlogCommendFromMachineLearnPai2-1.control