Mybatis-Plus和bootstrap-table集成 demo

時間 2021-05-02

標籤 javascript css html 前端 java jquery json bootstrap mybatis app 欄目 MyBatis 简体版

原文原文鏈接

JSP頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>用戶列表</title>
    <!-- Jquery -->
    <script src="${ctx}/static/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
    
    <!-- Bootstrap -->
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="${ctx}/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    
    <!-- Bootstrap table -->
    <link href="${ctx}/static/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet"/>
    <script src="${ctx}/static/bootstrap-table/js/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="${ctx}/static/bootstrap-table/js/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="${ctx}/static/bootstrap-table/js/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
    
        <div class="row">
            <div class="col-lg-8">
                <br/>
                <div class="panel panel-default">
                    <!-- 展現的table列表 -->
                    <table id="dataTable"></table>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            //1.初始化Table
            var oTable = new TableInit();
            oTable.Init();
        })
        
        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#dataTable').bootstrapTable({
                    method: 'post',
                    url: dataUrl,
                    dataType: "json",
                    striped: true,     //使表格帶有條紋
                    pagination: true,    //在表格底部顯示分頁工具欄
                    pageSize: 10,
                    pageNumber: 1,
                    pageList: [10, 20, 50, 100, 200, 500],
                    idField: "id",  //標識哪一個字段爲id主鍵
                    showToggle: false,   //名片格式
                    cardView: false,//設置爲True時顯示名片（card）佈局
                    showColumns: true, //顯示隱藏列  
                    showRefresh: true,  //顯示刷新按鈕
                    singleSelect: true,//複選框只能選擇一條記錄
                    search: false,//是否顯示右上角的搜索框
                    clickToSelect: true,//點擊行便可選中單選/複選框
                    sidePagination: "server",//表格分頁的位置
                    queryParamsType: "limit", //參數格式,發送標準的RESTFul類型的參數請求
                    toolbar: "#toolbar", //設置工具欄的Id或者class
                    columns: dataColumns, //列
                    silent: true,  //刷新事件必須設置
                    formatLoadingMessage: function () {
                        return "請稍等，正在加載中...";
                    },
                    formatNoMatches: function () {  //沒有匹配的結果
                        return '無符合條件的記錄';
                    },
                    onLoadSuccess: function () {
                        
                    },
                    onLoadError: function (data) {
                        //$('#reportTable').bootstrapTable('removeAll');
                    },
                    onClickRow: function (row) {
                        //window.location.href = "/qStock/qProInfo/" + row.ProductId;
                    },
                    responseHandler: function(res) {
                        if(res.code == 1){
                            return {
                                "total": res.data.total,//總頁數
                                "rows": res.data.rows   //數據
                             };
                            
                        }
                    }
                });
                
            };
        
            //獲得查詢的參數
            oTableInit.queryParams = function (params) {
                return dataQueryParams(params);
            };
            return oTableInit;
        };
        
        var dataUrl = "${ctx}/sys/user/getUserList";
        var dataColumns = [{
            field: 'id',
            title: '序號'
        }, {
            field: 'loginName',
            title: '登陸名'
        },  {
            field: 'userName',
            title: '用戶姓名'
        }, {
            field: 'mobile',
            title: '手機號'
        }];
        
        function dataQueryParams(params) {
            return {
                _size: params.limit,  //頁面大小
                _index: params.offset, //頁碼
            };
        }
    
        /**
         * 日期格式化
         * @param time
         * @returns {*}
         */
        function formatDate(time) {
            if (time == '' || time == null || time == undefined) return '';
            var datetime = new Date();
            datetime.setTime(time);
            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
            var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            return year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;
        }
    </script>
</body>
</html>

服務端代碼

@ResponseBody
    @RequestMapping("/getUserList")
    public AjaxResult getUserList() {
        Page<User> page = getPage();
        page = userService.selectPage(page, null);
        
        Map<String, Object> resObj = new HashMap<String, Object>();
        resObj.put("total", page.getTotal());
        resObj.put("rows", page.getRecords());
        
        return json(resObj);
    }
    
    public AjaxResult json(Object data) {
        return new AjaxResult().success(data);
    }

AjaxResult對象

public class AjaxResult {

    // 返回狀態碼   (默認1:成功,其它:失敗)
    private int code = 1;

    // 返回的中文消息
    private String message;

    // 成功時攜帶的數據
    private Object data;

    public int getCode() {
        return code;
    }

    public AjaxResult setCode(int code) {
        this.code = code;
        return this;
    }

    public String getMessage() {
        return message;
    }
    
    public AjaxResult setMessage(String message) {
        this.message = message;
        return this;
    }

    public Object getData() {
        return data;
    }

    public AjaxResult setData(Object data) {
        this.data = data;
        return this;
    }

    public AjaxResult addSuccess(String message) {
        this.message = message;
        this.code = 1;
        this.data = null;
        return this;
    }

    public AjaxResult addError(String message) {
        this.message = message;
        this.code = 999;
        this.data = null;
        return this;
    }

    public AjaxResult addFail(String message) {
        this.message = message;
        this.code = 999;
        this.data = null;
        return this;
    }

    public AjaxResult addWarn(String message) {
        this.message = message;
        this.code = 333;
        this.data = null;
        return this;
    }

    public AjaxResult success(Object data) {
        this.message = "success";
        this.data = data;
        this.code = 1;
        return this;
    }

    public boolean isSuccess() {
        return getCode() == 1;
    }

    @Override
    public String toString() {
        return JSON.toJSONString(this);
    }

靜態資源

Maven導入

<!-- Mybatis-Plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus</artifactId>
            <version>2.0.9</version>
        </dependency>

具體配置：http://mp.baomidou.com/#/javascript

注意事項

Page<T> selectPage(Page<T> page, Wrapper<T> wrapper); 是Mybatis-Plus內置的方法css
返回的數據，必須有total和rows，先後數據不一致html

responseHandler: function(res) {
                        if(res.code == 1){
                            return {
                                "total": res.data.total,//總頁數
                                "rows": res.data.rows   //數據
                             };
                            
                        }
                    }