bootstrapTable分頁、模糊查詢、資料重新整理、頁面跳轉。。。各種坑

首先準備好用到的js和css

bootstrap下載下傳位址：http://www.bootcss.com/

bootstrap table插件下載下傳位址

官網：https://bootstrap-table.com/

Github：https://github.com/wenzhixin/bootstrap-table

主要css和js bootstrap-table.css、jquery.min.js、bootstrap.min.js、bootstrap-table.js、bootstrap-table-zh-CN.js

接下來上代碼（主要部分的代碼）

注意紅色部分

<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/" target="_blank" rel="external nofollow" + 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/" target="_blank" rel="external nofollow" + 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）

想了很多方法最後感覺這個比較好

如有問題請多多指正

bootstrapTable分頁、模糊查詢、資料重新整理、頁面跳轉。。。各種坑

bootstrapTable分頁、模糊查詢、資料重新整理、頁面跳轉。。。各種坑

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題