Bootsrap Table表格分頁

時間 2019-11-13

標籤 bootsrap table 表格分頁简体版

原文原文鏈接

一 bootsrap簡介css

　　Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。html

　　它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它便是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。前端

　　簡介不介紹過多，相信用過的人都知道boostrap的好處。多瀏覽器兼容性、頁面美觀、提供一整套的樣式解決方案、基於H5+CSS3，對移動應用提供了很是好的支持...jquery

二配置文件spring

<script src="../js/jquery.1.11.3.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-table.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-table.css" />

　　boostrap基於jquery開發而成，須要在head中最早引入jquery，再進行其餘boostrap的js包的引入。在bootsrap3之後，支持模塊化導入包，針對本身使用的功能，導入必要的js包，能夠有效的減小頁面的資源加載量。json

三 Boostrap Table配置bootstrap

　　html後端

　　Boostrap經過解析服務端返回的json對象，與table的data-field進行比對，若是名字相同，則取對應的數據進行展示。api

　　能夠經過data-formatter屬性指定的js方法對服務端返回的數據進行相應的格式化，此例中使用了boostrap的圖標，例如：<span class="glyphicon glyphicon-credit-card"></span>，不容許在boostrap圖標的<span>標籤內添加內容。瀏覽器

    <div class="table-responsive tableDIV">
        <table class="table table-striped table-no-bordered table-hover"
                id="accountTable" data-toggle="accountTable" data-height="400">
            <thead>
                <tr>
                    <th data-field="name" data-formatter="accFormatterName"><span class="glyphicon glyphicon-user"></span>&nbsp;企業名稱/姓名</th>
                    <th data-field="mobile" ><span class="glyphicon glyphicon-phone"></span>&nbsp;手機號</th>
                    <!-- <th data-field="email" ><span class="glyphicon glyphicon-envelope"></span>&nbsp;郵箱</th> -->
                    <th data-field="code" data-formatter="FormatterNoOrCode"> <span class="glyphicon glyphicon-credit-card"></span>&nbsp;身份證/組織機構代碼證</th>
                    <th data-field="company" data-formatter="FormatterOrgan" ><span class="glyphicon glyphicon-home" ></span>&nbsp;所屬公司</th>
                    <th data-field="createDate" ><span class="glyphicon glyphicon-calendar"></span>&nbsp;導入日期</th>
                    <th data-field="tagName" ><span class="glyphicon glyphicon-list"></span>&nbsp;用戶組</th>
                    <th data-field="status" data-formatter="FormatterStatus"><span class="glyphicon glyphicon-th-large"></span>&nbsp;實名狀態</th>
                    <th data-field="" data-formatter="FormatterOperate" class="col-md-2"><span class="glyphicon glyphicon-briefcase"></span>&nbsp;操做</th>
                    <th data-field="accountUid" class="hidden"></th>
                    <th data-field="tagrefIds" class="hidden"></th>
                    <th data-field="tagId" class="hidden"></th>
                </tr>
            </thead>
        </table>
    </div>

　　服務端分頁須要指定sidePagination 值爲true, 同時能夠指定對應的查詢參數，內置的分頁查詢參數包括offset、limit等。

　　　function getAccountTab() {
        $("#accountTable").bootstrapTable({
            method : 'get',
            url : "../rest/api/account/query",
            pagination : true,
            pageList : [5, 8 ],
            search : false,
            showColumns : false,
            sidePagination : "server", //服務端請求
            queryParams : 'queryParams',
            pageSize : 8,
            pageNumber : 1,
            clickToSelect : true,
            singleSelect: true,
            paginationFirstText : "第一頁",
            paginationPreText : "上一頁",
            paginationNextText : "下一頁",
            paginationLastText : "最後一頁",
            onLoadSuccess : function(data) {
                
            },
            onLoadError : function(data) { 
            },
            onCheck: function (row) {
                   
               },
               onCheckAll: function(rows){
                   
               },
               onCheckSome: function(rows){
                   
               },
               onUncheck:function(row){
                   
               },
               onUncheckAll:function(){
                   delArray = new Array();
               }
                    
        });
    }

//設置傳入參數
    function queryParams(param) {
        return {
            limit : param.limit,
            offset : param.offset,
            name : $('#accountName').val(),
            mobile : $('#accountMobile').val(),
            email : $('#accountEmail').val(),
            organize : $('#accountOrganize').val(),
            type : $('#accountType option:selected').val(),
            tagId: $('#user_tag option:selected').val()
        };
    }

　　後端

    @GET
    @Path("/query")
    @Produces(MediaType.APPLICATION_JSON)
    public String queryAccount(@QueryParam("limit") final int limit,
            @QueryParam("offset") final int offset,
            @QueryParam("name") final String name,
            @QueryParam("mobile") final String mobile,
            @QueryParam("email") final String email,
            @QueryParam("organize") final String organize,
            @QueryParam("order") final String order,
            @QueryParam("type") final int type,
            @QueryParam("tagId") final String tagId) {
        final String accountUid = (String) request.getSession().getAttribute(
                ACCOUNTUID);
        final BasePageResponse response = this.accountService
                .findPageBySelector(offset, limit, type, name, email, 0,
                        mobile, accountUid, tagId);
        final List<AccountManagerData> accs = BeanConvertUtil
                .getAccountBeans(response);
        final JsonConfig jsonConfig = new JsonConfig();
        jsonConfig.registerJsonValueProcessor(Date.class,
                new JsonDateValueProcessor("yyyy-MM-dd HH:mm:ss"));
        final JSONArray array = JSONArray.fromObject(accs, jsonConfig);
        final JSONObject jsonObj = new JSONObject();
        jsonObj.put("rows", array.toString());
        jsonObj.put("total", response.getTotalCount());
        return jsonObj.toString();
    }