BootStrap table服務端分頁

時間 2019-11-25

標籤 bootstrap table 服務分頁欄目 Bootstarp 简体版

原文原文鏈接

涉及到的內容：css

1.bootstrap-table插件；html

2.mybatisplus分頁查詢；jquery

3.spring封裝對象匹配bootstrap-table插件格式；ajax

4.sql查詢隱藏手機號中間四位。spring

讓咱們開始：sql

1.想要實現bootstrap 表格服務端分頁，首先須要使用插件npm

bootstrap-table.min.cssjson

bootstrap-table.min.jsbootstrap

bootstrap-table-zh-CN.js數組

頁面上的引用是這樣的

index.html

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap表格</title>
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!-- Bootstrap -->
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <link href="css/bootstrap-table.min.css" rel="stylesheet">
        <script src="js/bootstrap-table.min.js"></script>
        <script src="js/bootstrap-table-zh-CN.js"></script>
        <script src="js/bootstrap-table-object.js"></script>
　　　　 <script src="js/index.js"></script>

    </head>
    <body>
        <h1>表格</h1>
        <div class="container">
            <div class="">
                 <table class="table table-striped table-bordered table-hover" id="userTable">
                 </table>
                 <div class="clear"></div>
            </div>
        </div>
    </body>
</html>

index.js

var MgrUser = {
    id: "userTable",//表格id
    seItem: null,        //選中的條目
    table: null,
    layerIndex: -1
};

/**
 * 初始化表格的列
 */
MgrUser.initColumn = function () {
    var columns = [
        {title: 'id', field: 'id', visible: false, align: 'center', valign: 'middle'},
        {title: '姓名', field: 'user_name', align: 'center', valign: 'middle', sortable: true},
        {title: '電話', field: 'mobile', align: 'center', valign: 'middle', sortable: true},
        {title: '時間', field: 'last_login_time', align: 'center', valign: 'middle', sortable: true},
        {title: '狀態', field: 'status', align: 'center', valign: 'middle', sortable: true}];
    return columns;
};

$(function () {
    var defaultColunms = MgrUser.initColumn();
    var table = new BSTable("userTable", "http://localhost/abc/def", defaultColunms);
    table.setPaginationType("server");
    MgrUser.table = table.init();
});

bootstrap-table-object.js

/**
 * 初始化 BootStrap Table 的封裝
 *
 * 約定：toolbar的id爲 (bstableId + "Toolbar")
 *
 * @author fengshuonan
 */
(function () {
    var BSTable = function (bstableId, url, columns) {
        this.btInstance = null;                    //jquery和BootStrapTable綁定的對象
        this.bstableId = bstableId;
        this.url =  url;
        this.method = "post";
        this.paginationType = "server";            //默認分頁方式是服務器分頁,可選項"client"
        this.toolbarId = bstableId + "Toolbar";
        this.columns = columns;
        this.height = 665;                        //默認表格高度665
        this.data = {};
        this.queryParams = {}; // 向後臺傳遞的自定義參數
    };

    BSTable.prototype =  {
        /**
         * 初始化bootstrap table
         */
        init: function () {
            var tableId = this.bstableId;
            var me = this;
            this.btInstance =
                $('#' + tableId).bootstrapTable({
                    contentType: "application/x-www-form-urlencoded",
                    url: this.url,                //請求地址
                    method: this.method,        //ajax方式,post仍是get
                    ajaxOptions: {                //ajax請求的附帶參數
                        data: this.data
                    },
                    /* responseHandler: function (res) {//獲取多級json
                            return res.data.records
                    }, */
                    toolbar: "#" + this.toolbarId,//頂部工具條
                    striped: true,                 //是否顯示行間隔色
                    cache: false,                  //是否使用緩存,默認爲true
                    sortable: true,              //是否啓用排序
                    sortOrder: "desc",             //排序方式
                    pageNumber: 1,                  //初始化加載第一頁，默認第一頁
                    pageSize: 14,                  //每頁的記錄行數（*）
                    pageList: [14, 50, 100],      //可供選擇的每頁的行數（*）
                    queryParamsType: 'limit',     //默認值爲 'limit' ,在默認狀況下 傳給服務端的參數爲：offset,limit,sort
                    queryParams: function (param) {
                        return $.extend(me.queryParams, param);
                    }, // 向後臺傳遞的自定義參數
                    sidePagination: this.paginationType,   //分頁方式：client客戶端分頁，server服務端分頁（*）
                    search: false,              //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端
                    strictSearch: true,            //設置爲 true啓用 全匹配搜索，不然爲模糊搜索
                    showColumns: true,             //是否顯示全部的列
                    showRefresh: true,             //是否顯示刷新按鈕
                    minimumCountColumns: 2,        //最少容許的列數
                    clickToSelect: true,        //是否啓用點擊選中行
                    searchOnEnterKey: true,        //設置爲 true時，按回車觸發搜索方法，不然自動觸發搜索方法
                    columns: this.columns,        //列數組
                    pagination: true,            //是否顯示分頁條
                    height: this.height,
                    icons: {
                        refresh: 'glyphicon-repeat',
                        toggle: 'glyphicon-list-alt',
                        columns: 'glyphicon-list'
                    },
                    iconSize: 'outline'
                });
            return this;
        },
        /**
         * 向後臺傳遞的自定義參數
         * @param param
         */
        setQueryParams: function (param) {
            this.queryParams = param;
        },
        /**
         * 設置分頁方式：server 或者 client
         */
        setPaginationType: function (type) {
            this.paginationType = type;
        },

        /**
         * 設置ajax post請求時候附帶的參數
         */
        set: function (key, value) {
            if (typeof key == "object") {
                for (var i in key) {
                    if (typeof i == "function")
                        continue;
                    this.data[i] = key[i];
                }
            } else {
                this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
            }
            return this;
        },

        /**
         * 設置ajax post請求時候附帶的參數
         */
        setData: function (data) {
            this.data = data;
            return this;
        },

        /**
         * 清空ajax post請求參數
         */
        clear: function () {
            this.data = {};
            return this;
        },

        /**
         * 刷新 bootstrap 表格
         * Refresh the remote server data,
         * you can set {silent: true} to refresh the data silently,
         * and set {url: newUrl} to change the url.
         * To supply query params specific to this request, set {query: {foo: 'bar'}}
         */
        refresh: function (parms) {
            if (typeof parms != "undefined") {
                this.btInstance.bootstrapTable('refresh', parms);
            } else {
                this.btInstance.bootstrapTable('refresh');
            }
        }
    };

    window.BSTable = BSTable;

}());

2.mybatisplus分頁

代碼片斷：

　　　　 Page<UserInfo> page = new PageFactory<UserInfo>().defaultPage();
        EntityWrapper<UserInfo> entityWrapper = new EntityWrapper<UserInfo>();
        entityWrapper.setSqlSelect("user_name","insert(mobile, 4, 4, '****') as mobile","IF(status = 0,'未簽到','已簽到') as status","last_login_time");
        entityWrapper.eq("manager_tel",managerTel);
        Page<Map<String, Object>> userPages = userInfoService.selectMapsPage(page,entityWrapper);
        return new PageInfoBT<>(userPages);

其中，PageFactory類是用來接收bootstrap-table傳遞的參數：

public class PageFactory<T> {

    public Page<T> defaultPage() {
        HttpServletRequest request = HttpContext.getRequest();
        int limit = Integer.valueOf(request.getParameter("limit"));     //每頁多少條數據
        int offset = Integer.valueOf(request.getParameter("offset"));   //每頁的偏移量(本頁當前有多少條)
        String sort = request.getParameter("sort");         //排序字段名稱
        String order = request.getParameter("order");       //asc或desc(升序或降序)
        if (ToolUtil.isEmpty(sort)) {
            Page<T> page = new Page<>((offset / limit + 1), limit);
            page.setOpenSort(false);
            return page;
        } else {
            Page<T> page = new Page<>((offset / limit + 1), limit, sort);
            if (Order.ASC.getDes().equals(order)) {
                page.setAsc(true);
            } else {
                page.setAsc(false);
            }
            return page;
        }
    }
}

使用mybatisplus的好處就是能夠不寫sql，像這樣：

　　　　 EntityWrapper<UserInfo> entityWrapper = new EntityWrapper<UserInfo>();
        entityWrapper.setSqlSelect("user_name","insert(mobile, 4, 4, '****') as mobile","IF(status = 0,'未簽到','已簽到') as status","last_login_time");
        entityWrapper.eq("manager_tel",managerTel);
        Page<Map<String, Object>> userPages = userInfoService.selectMapsPage(page,entityWrapper);

3.spring封裝對象匹配bootstrap-table格式

PageInfoBT類用來封裝對象：

public class PageInfoBT<T> {
    // 結果集
    private List<T> rows;
    // 總數
    private long total;

    public PageInfoBT(Page<T> page) {
        this.rows = page.getRecords();
        this.total = page.getTotal();
    }
    
    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }
}

返回的數據格式：

{
    "rows":[
        {
            "last_login_time":"2022-11-10 19:20:10",
            "user_name":"王非",
            "mobile":"130****2222",
            "status":"已簽到"
        },
        {
            "last_login_time":"2022-11-10 19:23:44",
            "user_name":"王曉晨",
            "mobile":"130****3333",
            "status":"已簽到"
        }
    ],
    "total":"18"
}

 4.sql查詢隱藏手機號中間四位：

SELECT
    username,
    insert(mobile, 4, 4, '****'),
    IF(status = 0,'未簽到','已簽到') as status,
    time 
FROM
    user

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。