如何实现bootStrap-table服务器端后台分页及自定义搜索框

这篇文章将为大家详细讲解有关如何实现bootStrap-table服务器端后台分页及自定义搜索框，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联建站是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：成都网站建设、成都做网站、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。

关于分页，之前一直纯手写js代码来实现，最近又需要用到分页，找了好多最终确定bootstrap-table，正好前端页面用的是bootstrap。下面就为大家介绍一下bootstrap-table如何实现分页及自定义搜索框。

首先下载BootStrap-table的js和CSS

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

下载完后解压

把bootstrap-table.js、bootstrap-table-zh-CN.js、bootstrap-table.css复制到项目中

在jsp中引入js和css

其他bootstrap相关文件和jQuery相关文件自行引入即可

先上一段jsp中代码

    

        

            

                

                    
                    
                
                

                    
                         搜索
                    
                
            
        
    


    

再看js代码

$(document).ready(function () {
  //调用函数，初始化表格
    initTable();
  //当点击查询按钮的时候执行,bootstrap-table前端分页是不能使用搜索功能，所以可以提取出来自定义搜索。后台代码，在后面给出
    $("#queryBtn").bind("click", initTable);
});
function initTable() {
    //先销毁表格
    $('#myTable').bootstrapTable('destroy');
    $('#myTable').bootstrapTable({
        url: "showConsumeRecordlList",//请求后台的URL（*）
        method: 'get',
        dataType: "json",
        dataField: 'rows',
        striped: true,//设置为 true 会有隔行变色效果
        undefinedText: "空",//当数据为 undefined 时显示的字符
        pagination: true, //设置为 true 会在表格底部显示分页条。
        showToggle: "true",//是否显示 切换试图（table/card）按钮
        showColumns: "true",//是否显示 内容列下拉框
        pageNumber: 1,//初始化加载第一页，默认第一页
        pageSize: 10,//每页的记录行数（*）
        pageList: [10, 20, 30, 40],//可供选择的每页的行数（*），当记录条数大于最小可选择条数时才会出现
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        search: false, //是否显示表格搜索,bootstrap-table服务器分页不能使用搜索功能，可以自定义搜索框，上面jsp中已经给出，操作方法也已经给出
        striped : true,//隔行变色
        showColumns: false,//是否显示 内容列下拉框
        showToggle: false, //是否显示详细视图和列表视图的切换按钮
        clickToSelect: true,  //是否启用点击选中行
        data_local: "zh-US",//表格汉化
        sidePagination: "server", //服务端处理分页
        queryParamsType : "limit",//设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.
        queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
//            请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
//　　　　　　　queryParamsType = 'limit' ,返回参数必须包含limit, offset, search, sort, order 
//            queryParamsType = 'undefined', 返回参数必须包含: pageSize, pageNumber, searchText, sortName, sortOrder. 
//            返回false将会终止请求。
            return {//这里的params是table提供的
                offset: params.offset,//从数据库第几条记录开始
                limit: params.limit,//找多少条
                memberId: $("#searchString_id").val() //这个就是搜索框中的内容，可以自动传到后台，搜索实现在xml中体现
            };
        },
        responseHandler: function (res) {
　　　　　　//如果后台返回的json格式不是{rows:[{...},{...}],total:100},可以在这块处理成这样的格式
　　　　　　return res;
        },
        columns: [{
            field: 'xuhao',
            title: '序号',
            formatter: idFormatter
        }, {
            field: 'memberId',
            title: '会员卡号',
        }, {
            field: 'name',
            title: '会员姓名'
        }, {
            field: 'payTime',
            title: '缴费时间',
            formatter: timeFormatter
        }, {
            field: 'payNo',
            title: '缴费单号'
        }, {
            field: 'payEntry',
            title: '收款条目',
            formatter: payEntryFormatter
        }, {
            field: 'cardType',
            title: '卡种',
            formatter: cardTypeFormatter
        }, {
            field: 'payMoney',
            title: '缴费金额'
        }, {
            field: 'operate',
            title: '缴费详情',
            formatter: operateFormatter
        } ],
        onLoadSuccess: function () {
        },
        onLoadError: function () {
            showTips("数据加载失败！");
        }
    });
}
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='缴费种类1';
        break;
    case '2':
        value='缴费种类2';
        break;
    case '3':
        value='缴费种类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 '查看';
}

前段准备就绪，开始服务器代码

准备分页实体

package com.gym.utils;

public class Page {
    // 每页显示数量
    private int limit;
    // 页码
    private int page;
    // sql语句起始索引
    private int offset;
    // setter and getter....
}

准备展示实体

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...
}

再来一个分页帮助类

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

public class PageHelper {
    // 注意：这两个属性名称不能改变，是定死的
    // 实体类集合
    private List rows = new ArrayList();
    // 数据总条数
    private int total;
    // setter and getter...
}

编写Controller

/**
     * 展示缴费详情列表
     * 
     * @param modelMap
     * @return
     */
    @RequestMapping("/showConsumeRecordlListA")
    @ResponseBody
    public String showConsumeRecordlListA(ConsumeRecord consumeRecord, HttpServletRequest request) {
        PageHelper pageHelper = new PageHelper();
        // 统计总记录数
        Integer total = consumerRecordService.getTotal(consumeRecord);
        pageHelper.setTotal(total);

        // 查询当前页实体对象
        List list = consumerRecordService.getConsumerRecordListPage(consumeRecord);
        pageHelper.setRows(list);

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

经过Service层，这块就不粘贴了，直接到达mapper

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

public interface ConsumeRecordMapper {
    ...
    ...
    /**
     * 获取消费记录条数
     * 
     * @param consumeRecord
     * @return
     */
    Integer getTotal(ConsumeRecord consumeRecord);

    /**
     * 分页查询消费记录集合
     * 
     * @param consumeRecord
     * @return
     */
    List getConsumerRecordListPage(ConsumeRecord consumeRecord);
}

然后mapper.xml

    
        SELECT count(1) FROM consume_record where 1=1  
        
            and member_id=#{memberId}
           
    
    
    
        SELECT * FROM consume_record  where 1=1  
        
            and member_id=#{memberId}
           
          ORDER BY pay_time DESC
        LIMIT #{offset},#{limit}
    

这是bootstrap-table官方文档，主要解释参数的意思，可根据文档按照自己的需求更改代码

关于如何实现bootStrap-table服务器端后台分页及自定义搜索框就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。