如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框

這篇文章將為大家詳細(xì)講解有關(guān)如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)建站是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

關(guān)于分頁，之前一直純手寫js代碼來實(shí)現(xiàn)，最近又需要用到分頁，找了好多最終確定bootstrap-table，正好前端頁面用的是bootstrap。下面就為大家介紹一下bootstrap-table如何實(shí)現(xiàn)分頁及自定義搜索框。

如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框

首先下載BootStrap-table的js和CSS

下載地址：https://github.com/wenzhixin/bootstrap-table.git

下載完后解壓

如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框

如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框

把bootstrap-table.js、bootstrap-table-zh-CN.js、bootstrap-table.css復(fù)制到項(xiàng)目中

如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框

如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框

在jsp中引入js和css

<link href="../css/bootstrap-table.css" rel="stylesheet">
<script src="../js/bootstrap-table.js"></script>
<script src="../js/bootstrap-table-zh-CN.js"></script>

其他bootstrap相關(guān)文件和jQuery相關(guān)文件自行引入即可

先上一段jsp中代碼

<div class="panel">
    <div class="panel-body" style="padding-bottom: 1px;">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-3">
                    <!-- 自定義搜索框 -->
                    <input type="text" name="searchString" id="searchString_id" class="form-control" placeholder="請輸入卡號" onkeydown="javascript:if(event.keyCode==13) searchId();" />
                </div>
                <div class="col-sm-1">
                    <button type="button" class="btn btn-primary btn-w-m" id="queryBtn">
                        <span class="glyphicon glyphicon-search"></span> 搜索
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="ibox-content">
    <table id="myTable"></table>
</div>

再看js代碼

$(document).ready(function () {
  //調(diào)用函數(shù)，初始化表格
    initTable();
  //當(dāng)點(diǎn)擊查詢按鈕的時(shí)候執(zhí)行,bootstrap-table前端分頁是不能使用搜索功能，所以可以提取出來自定義搜索。后臺代碼，在后面給出
    $("#queryBtn").bind("click", initTable);
});
function initTable() {
    //先銷毀表格
    $('#myTable').bootstrapTable('destroy');
    $('#myTable').bootstrapTable({
        url: "showConsumeRecordlList",//請求后臺的URL（*）
        method: 'get',
        dataType: "json",
        dataField: 'rows',
        striped: true,//設(shè)置為 true 會有隔行變色效果
        undefinedText: "空",//當(dāng)數(shù)據(jù)為 undefined 時(shí)顯示的字符
        pagination: true, //設(shè)置為 true 會在表格底部顯示分頁條。
        showToggle: "true",//是否顯示 切換試圖（table/card）按鈕
        showColumns: "true",//是否顯示 內(nèi)容列下拉框
        pageNumber: 1,//初始化加載第一頁，默認(rèn)第一頁
        pageSize: 10,//每頁的記錄行數(shù)（*）
        pageList: [10, 20, 30, 40],//可供選擇的每頁的行數(shù)（*），當(dāng)記錄條數(shù)大于最小可選擇條數(shù)時(shí)才會出現(xiàn)
        paginationPreText: '上一頁',
        paginationNextText: '下一頁',
        search: false, //是否顯示表格搜索,bootstrap-table服務(wù)器分頁不能使用搜索功能，可以自定義搜索框，上面jsp中已經(jīng)給出，操作方法也已經(jīng)給出
        striped : true,//隔行變色
        showColumns: false,//是否顯示 內(nèi)容列下拉框
        showToggle: false, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
        clickToSelect: true,  //是否啟用點(diǎn)擊選中行
        data_local: "zh-US",//表格漢化
        sidePagination: "server", //服務(wù)端處理分頁
        queryParamsType : "limit",//設(shè)置為 ‘limit’ 則會發(fā)送符合 RESTFul 格式的參數(shù).
        queryParams: function (params) {//自定義參數(shù)，這里的參數(shù)是傳給后臺的，我這是是分頁用的
//            請求服務(wù)器數(shù)據(jù)時(shí)，你可以通過重寫參數(shù)的方式添加一些額外的參數(shù)，例如 toolbar 中的參數(shù) 如果
//　　　　　　　queryParamsType = 'limit' ,返回參數(shù)必須包含limit, offset, search, sort, order 
//            queryParamsType = 'undefined', 返回參數(shù)必須包含: pageSize, pageNumber, searchText, sortName, sortOrder. 
//            返回false將會終止請求。
            return {//這里的params是table提供的
                offset: params.offset,//從數(shù)據(jù)庫第幾條記錄開始
                limit: params.limit,//找多少條
                memberId: $("#searchString_id").val() //這個(gè)就是搜索框中的內(nèi)容，可以自動傳到后臺，搜索實(shí)現(xiàn)在xml中體現(xiàn)
            };
        },
        responseHandler: function (res) {
　　　　　　//如果后臺返回的json格式不是{rows:[{...},{...}],total:100},可以在這塊處理成這樣的格式
　　　　　　return res;
        },
        columns: [{
            field: 'xuhao',
            title: '序號',
            formatter: idFormatter
        }, {
            field: 'memberId',
            title: '會員卡號',
        }, {
            field: 'name',
            title: '會員姓名'
        }, {
            field: 'payTime',
            title: '繳費(fèi)時(shí)間',
            formatter: timeFormatter
        }, {
            field: 'payNo',
            title: '繳費(fèi)單號'
        }, {
            field: 'payEntry',
            title: '收款條目',
            formatter: payEntryFormatter
        }, {
            field: 'cardType',
            title: '卡種',
            formatter: cardTypeFormatter
        }, {
            field: 'payMoney',
            title: '繳費(fèi)金額'
        }, {
            field: 'operate',
            title: '繳費(fèi)詳情',
            formatter: operateFormatter
        } ],
        onLoadSuccess: function () {
        },
        onLoadError: function () {
            showTips("數(shù)據(jù)加載失??！");
        }
    });
}
function idFormatter(value, row, index){
    return index+1;
}
function timeFormatter(value, row, index) {
    if (value != null) {
        var date = new Date(dateTime);
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
    }
}
function payEntryFormatter(value, row, index){
    switch(row.payEntry){
    case '1':
        value='繳費(fèi)種類1';
        break;
    case '2':
        value='繳費(fèi)種類2';
        break;
    case '3':
        value='繳費(fèi)種類3';
        break;
    default:
        value='其他';
        break;
    }
    return value;
}
function cardTypeFormatter(value, row, index) {
    switch(row.cardType){
    case '1':
        value='卡種1';
        break;
    case '2':
        value='卡種2';
        break;
    case '3':
        value='卡種3';
        break;
    default:
        value='其他';
        break;
    }
    return value;
}
function operateFormatter(value, row, index) {
      return '<button  type="button" onClick="showConsumeRecord('+id+')"  class="btn btn-xs btn-primary" data-toggle="modal" data-target="#consumeModal">查看</button>';
}

前段準(zhǔn)備就緒，開始服務(wù)器代碼

準(zhǔn)備分頁實(shí)體

package com.gym.utils;

public class Page {
    // 每頁顯示數(shù)量
    private int limit;
    // 頁碼
    private int page;
    // sql語句起始索引
    private int offset;
    // setter and getter....
}

準(zhǔn)備展示實(shí)體

import java.util.Date;
import com.gym.utils.Page;

public class ConsumeRecord extends Page {
    private Integer id;
    private Integer memberId;
    private String months;
    private Long payMoney;
    private Date payTime;
    private String payStatus;
    private String payEntry;
    private String remark;
    private String name;
    private String cardType;
    private Date endTime;
    private Date registerTime;
    private String payNo;
    // setter and getter...
}

再來一個(gè)分頁幫助類

import java.util.ArrayList;
import java.util.List;

public class PageHelper<T> {
    // 注意：這兩個(gè)屬性名稱不能改變，是定死的
    // 實(shí)體類集合
    private List<T> rows = new ArrayList<T>();
    // 數(shù)據(jù)總條數(shù)
    private int total;
    // setter and getter...
}

編寫Controller

/**
     * 展示繳費(fèi)詳情列表
     * 
     * @param modelMap
     * @return
     */
    @RequestMapping("/showConsumeRecordlListA")
    @ResponseBody
    public String showConsumeRecordlListA(ConsumeRecord consumeRecord, HttpServletRequest request) {
        PageHelper<ConsumeRecord> pageHelper = new PageHelper<ConsumeRecord>();
        // 統(tǒng)計(jì)總記錄數(shù)
        Integer total = consumerRecordService.getTotal(consumeRecord);
        pageHelper.setTotal(total);

        // 查詢當(dāng)前頁實(shí)體對象
        List<ConsumeRecord> list = consumerRecordService.getConsumerRecordListPage(consumeRecord);
        pageHelper.setRows(list);

        return new GsonBuilder().serializeNulls().create().toJson(pageHelper);
    }

經(jīng)過Service層，這塊就不粘貼了，直接到達(dá)mapper

import java.util.List;
import com.entity.ConsumeRecord;

public interface ConsumeRecordMapper {
    ...
    ...
    /**
     * 獲取消費(fèi)記錄條數(shù)
     * 
     * @param consumeRecord
     * @return
     */
    Integer getTotal(ConsumeRecord consumeRecord);

    /**
     * 分頁查詢消費(fèi)記錄集合
     * 
     * @param consumeRecord
     * @return
     */
    List<ConsumeRecord> getConsumerRecordListPage(ConsumeRecord consumeRecord);
}

然后mapper.xml

<!-- 查詢符合條件的繳費(fèi)總條數(shù) -->
    <select id="getTotal" parameterType="com.entity.ConsumeRecord" resultType="int">
        SELECT count(1) FROM consume_record where 1=1  
        <if test="memberId != null and memberId != ''">
            and member_id=#{memberId}
          </if> 
    </select>
    <!-- 查詢符合條件的繳費(fèi)信息集合 -->
    <select id="getConsumerRecordListPage" parameterType="com.entity.ConsumeRecord" resultMap="BaseResultMap">
        SELECT * FROM consume_record  where 1=1  
        <if test="memberId != null and memberId != ''">
            and member_id=#{memberId}
          </if> 
          ORDER BY pay_time DESC
        LIMIT #{offset},#{limit}
    </select>

這是bootstrap-table官方文檔，主要解釋參數(shù)的意思，可根據(jù)文檔按照自己的需求更改代碼

關(guān)于如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站題目：如何實(shí)現(xiàn)bootStrap-table服務(wù)器端后臺分頁及自定義搜索框
URL網(wǎng)址：http://muchs.cn/article22/isjhcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、做網(wǎng)站、網(wǎng)站營銷、服務(wù)器托管、建站公司、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)