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

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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

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

推荐教程:bootstrap教程

首先下载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

<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相关文件和jQuery相关文件自行引入即可

先上一段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 () {  //调用函数,初始化表格    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 '<button  type="button" onClick="showConsumeRecord('+id+')"  class="btn btn-xs btn-primary" data-toggle="modal" data-target="#consumeModal">查看</button>';}
登录后复制

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

准备分页实体

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<T> {    // 注意:这两个属性名称不能改变,是定死的    // 实体类集合    private List<T> rows = new ArrayList<T>();    // 数据总条数    private int total;    // setter and getter...}
登录后复制

编写Controller

/**     * 展示缴费详情列表     *      * @param modelMap     * @return     */    @RequestMapping("/showConsumeRecordlListA")    @ResponseBody    public String showConsumeRecordlListA(ConsumeRecord consumeRecord, HttpServletRequest request) {        PageHelper<ConsumeRecord> pageHelper = new PageHelper<ConsumeRecord>();        // 统计总记录数        Integer total = consumerRecordService.getTotal(consumeRecord);        pageHelper.setTotal(total);        // 查询当前页实体对象        List<ConsumeRecord> 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<ConsumeRecord> getConsumerRecordListPage(ConsumeRecord consumeRecord);}
登录后复制

然后mapper.xml

<!-- 查询符合条件的缴费总条数 -->    <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>    <!-- 查询符合条件的缴费信息集合 -->    <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官方文档,主要解释参数的意思,可根据文档按照自己的需求更改代码

以上就是bootStrap-table服务器端后台分页及自定义搜索框的实现的使用的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:bootstrap react区别
下一篇:手把手带你使用CSS Flex和Grid布局实现3D骰子(附代码)

发表评论

关闭广告
关闭广告