關於分頁,之前一直純手寫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>
<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>
$(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... }
/** * 展示缴费详情列表 * * @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); }
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); }
<!-- 查询符合条件的缴费总条数 --> <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伺服器端後台分頁及自訂搜尋框的實作的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!