2020-11-19 解決bootstraptable 跳轉返回後到原頁問題

鯨魚姐發表於2020-11-19
bootAPT

參考連線：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

相關文章