bootstrap Table的使用方法總結(jié)
更新時(shí)間：2021年05月18日 09:35:21 作者：晨港飛燕
這篇文章主要為大家詳細(xì)介紹了bootstrap Table的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文為大家分享了bootstrap Table的使用方法，供大家參考，具體內(nèi)容如下
官網(wǎng)資料
效果圖：
案例：
html
<!-- 表格 -->
<table id="ffServerSystemCheckListTable"
data-toolbar="#toolbar"
data-show-columns="true"
data-show-columns-toggle-all="true">
<%-- <thead>--%>
<%-- <tr>--%>
<%-- <th data-field="cityName">ID</th>--%>
<%-- <th data-field="cityName">Item Name</th>--%>
<%-- <th data-field="cityName">Item Price</th>--%>
<%-- </tr>--%>
<%-- </thead>--%>
</table>
javascript
$(document).ready(function () {
//表格插件
mytable=$('#ffServerSystemCheckListTable').bootstrapTable({
//請(qǐng)求方法
method: 'post',
//類型json
dataType: "json",
contentType: "application/x-www-form-urlencoded",
//顯示檢索按鈕
//showSearch: false,
//顯示刷新按鈕
showRefresh: false,
//顯示切換手機(jī)試圖按鈕
showToggle: false,
//顯示 內(nèi)容列下拉框
showColumns: false,
//顯示到處按鈕
showExport: false,
//顯示切換分頁(yè)按鈕
showPaginationSwitch: false,
//最低顯示2行
minimumCountColumns: 2,
//是否顯示行間隔色
//striped: true,
//是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
cache: false,
//是否顯示分頁(yè)（*）
pagination: true,
//排序方式
sortOrder: "asc",
//初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageNumber: 1,
//每頁(yè)的記錄行數(shù)（*）
pageSize: 10,
//可供選擇的每頁(yè)的行數(shù)（*）
pageList: [10, 25, 50, 100],
//這個(gè)接口需要處理bootstrap table傳遞的固定參數(shù),并返回特定格式的json數(shù)據(jù)
url: "${ctx}/ff/server/ffServerSystemCheck/data",
//默認(rèn)值為 'limit',傳給服務(wù)端的參數(shù)為：limit, offset, search, sort, order Else
//queryParamsType:'',
查詢參數(shù),每次調(diào)用是會(huì)帶上這個(gè)參數(shù)，可自定義
queryParams: function (params) {
var searchParam = $("#searchForm").serializeJSON();
searchParam.pageNo = params.limit === undefined ? "1" : params.offset / params.limit + 1;
searchParam.pageSize = params.limit === undefined ? -1 : params.limit;
searchParam.orderBy = params.sort === undefined ? "" : params.sort + " " + params.order;
return searchParam;
},
//分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
sidePagination: "server",
// contextMenuTrigger:"right",//pc端 按右鍵彈出菜單
// contextMenuTriggerMobile: "press",//手機(jī)端 彈出菜單，click：?jiǎn)螕簦?press：長(zhǎng)按。
// contextMenu: '#context-menu',
onClickRow: function (row, $el) {
rowId = row.id;
},
onShowSearch: function () {
$("#search-collapse").slideToggle();
},
responseHandler: function (res) {//用于接收其他參數(shù)
return res;
},
onPreBody: function (res) {},
onLoadSuccess: function() {},
onPostHeader: function () {},
onAll: function () {},
columns: [
[
{
field: 'cityName',
title: '城市公司',
rowspan: 2,
formatter: function (value, row, index) {
return value;
}
}
, {
field: 'projectName',
title: '項(xiàng)目名稱',
rowspan: 2
}, {
title: '首頁(yè)輪播',
colspan: 2,
align: 'center'
}, {
title: '消息',
colspan: 2,
align: 'center'
}, {
title: '海報(bào)模板',
colspan: 2,
align: 'center'
}, {
title: '樓盤動(dòng)態(tài)',
colspan: 2,
align: 'center'
}, {
title: '項(xiàng)目賣點(diǎn)',
colspan: 2,
align: 'center'
}, {
title: '項(xiàng)目海報(bào)',
colspan: 2,
align: 'center'
}, {
title: '項(xiàng)目視頻',
colspan: 2,
align: 'center'
}],
[{
field: 'newsCount',
title: '更新次數(shù)',
}
, {
field: 'newsState',
title:"-",
class:'newsTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "<span style=\"color: red;\">不合格<span>";
}
return value;
// return jp.getDictLabel(${fns:toJson(fns:getDictList('cooperation_flag'))}, value, "-");
}
}
, {
field: 'msgCount',
title: '更新次數(shù)'
}
, {
field: 'msgState',
title: '-',
class:'msgTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "<span style=\"color: red;\">不合格<span>";
}
return value;
}
}
, {
field: 'tempCount',
title: '更新次數(shù)'
}, {
field: 'tempState',
title: '-',
class:'tempTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "<span style=\"color: red;\">不合格<span>";
}
return value;
}
},
{
field: 'houseCount',
title: '更新次數(shù)'
}, {
field: 'houseState',
title: '-',
class:'houseTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "<span style=\"color: red;\">不合格<span>";
}
return value;
}
},
{
field: 'sellCount',
title: '更新次數(shù)'
}, {
field: 'sellState',
title: '-',
class:'sellTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "<span style=\"color: red;\">不合格<span>";
}
return value;
}
},
{
field: 'postCount',
title: '更新次數(shù)'
}, {
field: 'postState',
title: '-',
class:'postTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "<span style=\"color: red;\">不合格<span>";
}
return value;
}
}, {
field: 'videoCount',
title: '更新次數(shù)'
}
, {
field: 'videoState',
title: '-',
class:'videoTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "<span style=\"color: red;\">不合格<span>";
}
return value;
}
}
]
]
});
if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {//如果是移動(dòng)端
$('#ffServerSystemCheckListTable').bootstrapTable("toggleView");
}
$('#ffServerSystemCheckListTable').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', function () {
$('#remove').prop('disabled', !$('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length);
$('#batchSet').prop('disabled', !$('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length);
$('#view,#edit').prop('disabled', $('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length != 1);
});
// 綁定查詢按扭
$("#search").click("click", function () {
//重新加載表格參數(shù)
// $('#ffServerSystemCheckListTable').bootstrapTable("refreshOptions", {
// //url : path + "/api/peopledataInfo/getPeopleInfoList", // 獲取數(shù)據(jù)的地址
// columns : [],
//
// });
//動(dòng)態(tài)表頭設(shè)置
$.ajax({
url: "${ctx}/ff/server/ffServerSystemCheck/checkInfo",
// type : "POST",
data: $("#searchForm").serialize(),
success: function (data) {
$(".newsTitle .th-inner").html(data.newsTitle);
$(".msgTitle .th-inner").html(data.msgTitle);
$(".tempTitle .th-inner").html(data.tempTitle);
$(".houseTitle .th-inner").html(data.houseTitle);
$(".sellTitle .th-inner").html(data.sellTitle);
$(".postTitle .th-inner").html(data.postTitle);
$(".videoTitle .th-inner").html(data.videoTitle);
$('#ffServerSystemCheckListTable').bootstrapTable('refresh');
}
});
});
});
Java
controller:
@ResponseBody
@RequestMapping(value = "data")
public Map<String, Object> data(HttpServletRequest request, HttpServletResponse response) {
Page<FfServerSystemCheck> page = server.findWebPage(new Page<FfServerSystemCheck>(request, response));
Map<String, Object> map = new HashMap<String, Object>();
map.put("rows", page.getList());
map.put("total", page.getCount());
return data;
}
xml:
<select id="findWebList" resultType="com.jeeplus.modules.ff.server.entity.FfServerSystemCheck">
<if test="dateTypeAll == '0'.toString() or dateTypeAll == '1'.toString() or dateTypeAll=='yesterday' or dateTypeAll=='today'">
select
cityName,
projectName,
newsCount,
'-' newsState,
msgCount,
'-' msgState,
tempCount,
'-' tempState,
houseCount,
'-' houseState,
sellCount,
'-' sellState,
postCount,
'-' postState,
videoCount,
'-' videoState
</if>
<if test="dateTypeAll == 'weeks' or dateTypeAll == 'month' or dateTypeAll=='halfYear' or dateTypeAll=='years'">
select
cityName,
projectName,
newsCount,
CASE WHEN newsCount > #{newsNum} THEN '合格' ELSE '不合格' END newsState,
msgCount,
CASE WHEN msgCount > #{msgNum} THEN '合格' ELSE '不合格' END msgState,
tempCount,
CASE WHEN tempCount > #{tempNum} THEN '合格' ELSE '不合格' END tempState,
houseCount,
CASE WHEN houseCount > #{houseNum} THEN '合格' ELSE '不合格' END houseState,
sellCount,
CASE WHEN sellCount > #{sellNum} THEN '合格' ELSE '不合格' END sellState,
postCount,
CASE WHEN postCount > #{postNum} THEN '合格' ELSE '不合格' END postState,
videoCount,
CASE WHEN videoCount > #{videoNum} THEN '合格' ELSE '不合格' END videoState
</if>
from (
SELECT
so.NAME cityName,
pm.project_name projectName,
( SELECT count(*) FROM ff_server_news_manage WHERE project_id = pm.id
<if test="startDate != null and startDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate}
</if>
<if test="endDate != null and endDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate}
</if>
) newsCount,
( SELECT count(*) FROM ff_server_message_manage WHERE project_id = pm.id
<if test="startDate != null and startDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate}
</if>
<if test="endDate != null and endDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate}
</if>
) msgCount,
( SELECT count(*) FROM ff_tuoke_poster_template WHERE project_id = pm.id
<if test="startDate != null and startDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate}
</if>
<if test="endDate != null and endDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate}
</if>
) tempCount,
( SELECT count(*) FROM ff_server_houses_dynamic WHERE project_id = pm.id
<if test="startDate != null and startDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate}
</if>
<if test="endDate != null and endDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate}
</if>
) houseCount,
( SELECT count( CASE WHEN type = 0 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id
<if test="startDate != null and startDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate}
</if>
<if test="endDate != null and endDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate}
</if>
) sellCount,
( SELECT count( CASE WHEN type = 1 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id
<if test="startDate != null and startDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate}
</if>
<if test="endDate != null and endDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate}
</if>
) postCount,
( SELECT count( CASE WHEN type = 2 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id
<if test="startDate != null and startDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate}
</if>
<if test="endDate != null and endDate != ''">
AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate}
</if>
) videoCount
FROM
sys_office so
INNER JOIN ff_server_project_manage pm ON pm.city_company = so.id
<where>
${dataScope}
<if test="cityCompanyId != null and cityCompanyId != ''">
AND so.id = #{cityCompanyId}
</if>
</where>
GROUP BY
pm.project_name
ORDER BY pm.create_date DESC
) as a
</select>
Page對(duì)象
/**
* Copyright © 2015-2020 <a rel="external nofollow" >JeePlus</a> All rights reserved.
*/
package com.jeeplus.core.persistence;
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Pattern;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.jeeplus.common.config.Global;
import com.jeeplus.common.utils.CookieUtils;
/**
* 分頁(yè)類
* @author jeeplus
* @version 2016-7-2
* @param <T>
*/
public class Page<T> {
protected int pageNo = 1; // 當(dāng)前頁(yè)碼
protected int pageSize = Integer.valueOf(Global.getConfig("page.pageSize")); // 頁(yè)面大小，設(shè)置為“-1”表示不進(jìn)行分頁(yè)（分頁(yè)無(wú)效）
protected long count;// 總記錄數(shù)，設(shè)置為“-1”表示不查詢總數(shù)
protected int first;// 首頁(yè)索引
protected int last;// 尾頁(yè)索引
protected int prev;// 上一頁(yè)索引
protected int next;// 下一頁(yè)索引
private boolean firstPage;//是否是第一頁(yè)
private boolean lastPage;//是否是最后一頁(yè)
protected int length = 8;// 顯示頁(yè)面長(zhǎng)度
protected int slider = 1;// 前后顯示頁(yè)面長(zhǎng)度
private List<T> list = new ArrayList<T>();
private String orderBy = ""; // 標(biāo)準(zhǔn)查詢有效， 實(shí)例： updatedate desc, name asc
protected String funcName = "page"; // 設(shè)置點(diǎn)擊頁(yè)碼調(diào)用的js函數(shù)名稱，默認(rèn)為page，在一頁(yè)有多個(gè)分頁(yè)對(duì)象時(shí)使用。
protected String funcParam = ""; // 函數(shù)的附加參數(shù)，第三個(gè)參數(shù)值。
private String message = ""; // 設(shè)置提示消息，顯示在“共n條”之后
public Page() {
this.pageSize = -1;
}
/**
* 構(gòu)造方法
* @param request 傳遞 repage 參數(shù)，來(lái)記住頁(yè)碼
* @param response 用于設(shè)置 Cookie，記住頁(yè)碼
*/
public Page(HttpServletRequest request, HttpServletResponse response){
this(request, response, -2);
}
/**
* 構(gòu)造方法
* @param request 傳遞 repage 參數(shù)，來(lái)記住頁(yè)碼
* @param response 用于設(shè)置 Cookie，記住頁(yè)碼
* @param defaultPageSize 默認(rèn)分頁(yè)大小，如果傳遞 -1 則為不分頁(yè)，返回所有數(shù)據(jù)
*/
public Page(HttpServletRequest request, HttpServletResponse response, int defaultPageSize){
// 設(shè)置頁(yè)碼參數(shù)（傳遞repage參數(shù)，來(lái)記住頁(yè)碼）
String no = request.getParameter("pageNo");
if (StringUtils.isNumeric(no)){
CookieUtils.setCookie(response, "pageNo", no);
this.setPageNo(Integer.parseInt(no));
}else if (request.getParameter("repage")!=null){
no = CookieUtils.getCookie(request, "pageNo");
if (StringUtils.isNumeric(no)){
this.setPageNo(Integer.parseInt(no));
}
}
// 設(shè)置頁(yè)面大小參數(shù)（傳遞repage參數(shù)，來(lái)記住頁(yè)碼大?。?
String size = request.getParameter("pageSize");
if (StringUtils.isNumeric(size)){
CookieUtils.setCookie(response, "pageSize", size);
this.setPageSize(Integer.parseInt(size));
}else if (request.getParameter("repage")!=null){
no = CookieUtils.getCookie(request, "pageSize");
if (StringUtils.isNumeric(size)){
this.setPageSize(Integer.parseInt(size));
}
}else if (defaultPageSize != -2){
this.pageSize = defaultPageSize;
}else if ("-1".equals(size)){
this.pageSize = -1;
}
// 設(shè)置排序參數(shù)
String orderBy = request.getParameter("orderBy");
if (StringUtils.isNotBlank(orderBy)){
this.setOrderBy(orderBy);
}
}
/**
* 構(gòu)造方法
* @param pageNo 當(dāng)前頁(yè)碼
* @param pageSize 分頁(yè)大小
*/
public Page(int pageNo, int pageSize) {
this(pageNo, pageSize, 0);
}
/**
* 構(gòu)造方法
* @param pageNo 當(dāng)前頁(yè)碼
* @param pageSize 分頁(yè)大小
* @param count 數(shù)據(jù)條數(shù)
*/
public Page(int pageNo, int pageSize, long count) {
this(pageNo, pageSize, count, new ArrayList<T>());
}
/**
* 構(gòu)造方法
* @param pageNo 當(dāng)前頁(yè)碼
* @param pageSize 分頁(yè)大小
* @param count 數(shù)據(jù)條數(shù)
* @param list 本頁(yè)數(shù)據(jù)對(duì)象列表
*/
public Page(int pageNo, int pageSize, long count, List<T> list) {
this.setCount(count);
this.setPageNo(pageNo);
this.pageSize = pageSize;
this.list = list;
}
/**
* 初始化參數(shù)
*/
public void initialize(){
//1
this.first = 1;
this.last = (int)(count / (this.pageSize < 1 ? 20 : this.pageSize) + first - 1);
if (this.count % this.pageSize != 0 || this.last == 0) {
this.last++;
}
if (this.last < this.first) {
this.last = this.first;
}
if (this.pageNo <= 1) {
this.pageNo = this.first;
this.firstPage=true;
}
if (this.pageNo >= this.last) {
this.pageNo = this.last;
this.lastPage=true;
}
if (this.pageNo < this.last - 1) {
this.next = this.pageNo + 1;
} else {
this.next = this.last;
}
if (this.pageNo > 1) {
this.prev = this.pageNo - 1;
} else {
this.prev = this.first;
}
//2
if (this.pageNo < this.first) {// 如果當(dāng)前頁(yè)小于首頁(yè)
this.pageNo = this.first;
}
if (this.pageNo > this.last) {// 如果當(dāng)前頁(yè)大于尾頁(yè)
this.pageNo = this.last;
}
}
/**
* 默認(rèn)輸出當(dāng)前分頁(yè)標(biāo)簽
* <div class="page">${page}</div>
*/
@Override
public String toString() {
StringBuilder sb = new StringBuilder();
sb.append("<div class=\"fixed-table-pagination\" style=\"display: block;\">");
// sb.append("<div class=\"dataTables_info\">");
// sb.append("<li class=\"disabled controls\"><a href=\"javascript:\">當(dāng)前 ");
// sb.append("<input type=\"text\" value=\""+pageNo+"\" onkeypress=\"var e=window.event||this;var c=e.keyCode||e.which;if(c==13)");
// sb.append(funcName+"(this.value,"+pageSize+",'"+funcParam+"');\" onclick=\"this.select();\"/> / ");
// sb.append("<input type=\"text\" value=\""+pageSize+"\" onkeypress=\"var e=window.event||this;var c=e.keyCode||e.which;if(c==13)");
// sb.append(funcName+"("+pageNo+",this.value,'"+funcParam+"');\" onclick=\"this.select();\"/> 條，");
// sb.append("共 " + count + " 條"+(message!=null?message:"")+"</a></li>\n");
// sb.append("</div>");
long startIndex = (pageNo-1)*pageSize + 1;
long endIndex = pageNo*pageSize <=count? pageNo*pageSize:count;
sb.append("<div class=\"pull-left pagination-detail\">");
sb.append("<span class=\"pagination-info\">顯示第 "+startIndex+" 到第 "+ endIndex +" 條記錄，總共 "+count+" 條記錄</span>");
sb.append("<span class=\"page-list\">每頁(yè)顯示 <span class=\"btn-group dropup\">");
sb.append("<button type=\"button\" class=\"btn btn-default btn-outline dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\">");
sb.append("<span class=\"page-size\">"+pageSize+"</span> <span class=\"caret\"></span>");
sb.append("</button>");
sb.append("<ul class=\"dropdown-menu\" role=\"menu\">");
sb.append("<li class=\""+getSelected(pageSize,10)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",10,'"+funcParam+"');\">10</a></li>");
sb.append("<li class=\""+getSelected(pageSize,25)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",25,'"+funcParam+"');\">25</a></li>");
sb.append("<li class=\""+getSelected(pageSize,50)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",50,'"+funcParam+"');\">50</a></li>");
sb.append("<li class=\""+getSelected(pageSize,100)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",100,'"+funcParam+"');\">100</a></li>");
sb.append("</ul>");
sb.append("</span> 條記錄</span>");
sb.append("</div>");
// sb.append("<p>每頁(yè) <select onChange=\""+funcName+"("+pageNo+",this.value,'"+funcParam+"');\"" +"style=\"display:display !important;\" class=\"form-control m-b input-sm\">" +
// "<option value=\"10\" "+getSelected(pageSize,10)+ ">10</option>" +
// "<option value=\"25\" "+getSelected(pageSize,25)+ ">25</option>" +
// "<option value=\"50\" "+getSelected(pageSize,50)+ ">50</option>" +
// "<option value=\"100\" "+getSelected(pageSize,100)+ ">100</option>" +
// "</select> 條記錄，顯示 " +startIndex+ " 到 "+ endIndex +" 條，共 "+count+" 條</p>");
// sb.append("</div>");
// sb.append("</div>");
sb.append("<div class=\"pull-right pagination-roll\">");
sb.append("<ul class=\"pagination pagination-outline\">");
if (pageNo == first) {// 如果是首頁(yè)
sb.append("<li class=\"paginate_button previous disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-double-left\"></i></a></li>\n");
sb.append("<li class=\"paginate_button previous disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-left\"></i></a></li>\n");
} else {
sb.append("<li class=\"paginate_button previous\"><a href=\"javascript:\" onclick=\""+funcName+"("+first+","+pageSize+",'"+funcParam+"');\"><i class=\"fa fa-angle-double-left\"></i></a></li>\n");
sb.append("<li class=\"paginate_button previous\"><a href=\"javascript:\" onclick=\""+funcName+"("+prev+","+pageSize+",'"+funcParam+"');\"><i class=\"fa fa-angle-left\"></i></a></li>\n");
}
int begin = pageNo - (length / 2);
if (begin < first) {
begin = first;
}
int end = begin + length - 1;
if (end >= last) {
end = last;
begin = end - length + 1;
if (begin < first) {
begin = first;
}
}
if (begin > first) {
int i = 0;
for (i = first; i < first + slider && i < begin; i++) {
sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
+ (i + 1 - first) + "</a></li>\n");
}
if (i < begin) {
sb.append("<li class=\"paginate_button disabled\"><a href=\"javascript:\">...</a></li>\n");
}
}
for (int i = begin; i <= end; i++) {
if (i == pageNo) {
sb.append("<li class=\"paginate_button active\"><a href=\"javascript:\">" + (i + 1 - first)
+ "</a></li>\n");
} else {
sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
+ (i + 1 - first) + "</a></li>\n");
}
}
if (last - end > slider) {
sb.append("<li class=\"paginate_button disabled\"><a href=\"javascript:\">...</a></li>\n");
end = last - slider;
}
for (int i = end + 1; i <= last; i++) {
sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
+ (i + 1 - first) + "</a></li>\n");
}
if (pageNo == last) {
sb.append("<li class=\"paginate_button next disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-right\"></i></a></li>\n");
sb.append("<li class=\"paginate_button next disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-double-right\"></i></a></li>\n");
} else {
sb.append("<li class=\"paginate_button next\"><a href=\"javascript:\" onclick=\""+funcName+"("+next+","+pageSize+",'"+funcParam+"');\">"
+ "<i class=\"fa fa-angle-right\"></i></a></li>\n");
sb.append("<li class=\"paginate_button next\"><a href=\"javascript:\" onclick=\""+funcName+"("+last+","+pageSize+",'"+funcParam+"');\">"
+ "<i class=\"fa fa-angle-double-right\"></i></a></li>\n");
}
sb.append("</ul>");
sb.append("</div>");
sb.append("</div>");
// sb.insert(0,"<ul>\n").append("</ul>\n");
// sb.append("<div style=\"clear:both;\"></div>");
// sb.insert(0,"<div class=\"page\">\n").append("</div>\n");
return sb.toString();
}
protected String getSelected(int pageNo, int selectedPageNo){
if(pageNo == selectedPageNo){
//return "selected";
return "active";
}else{
return "";
}
}
/**
* 獲取分頁(yè)HTML代碼
* @return
*/
public String getHtml(){
return toString();
}
// public static void main(String[] args) {
// Page<String> p = new Page<String>(3, 3);
// System.out.println(p);
// System.out.println("首頁(yè)："+p.getFirst());
// System.out.println("尾頁(yè)："+p.getLast());
// System.out.println("上頁(yè)："+p.getPrev());
// System.out.println("下頁(yè)："+p.getNext());
// }
/**
* 獲取設(shè)置總數(shù)
* @return
*/
public long getCount() {
return count;
}
/**
* 設(shè)置數(shù)據(jù)總數(shù)
* @param count
*/
public void setCount(long count) {
this.count = count;
if (pageSize >= count){
pageNo = 1;
}
}
/**
* 獲取當(dāng)前頁(yè)碼
* @return
*/
public int getPageNo() {
return pageNo;
}
/**
* 設(shè)置當(dāng)前頁(yè)碼
* @param pageNo
*/
public void setPageNo(int pageNo) {
this.pageNo = pageNo;
}
/**
* 獲取頁(yè)面大小
* @return
*/
public int getPageSize() {
return pageSize;
}
/**
* 設(shè)置頁(yè)面大小（最大500）
* @param pageSize
*/
public void setPageSize(int pageSize) {
this.pageSize = pageSize <= 0 ? 10 : pageSize;// > 500 ? 500 : pageSize;
}
/**
* 首頁(yè)索引
* @return
*/
@JsonIgnore
public int getFirst() {
return first;
}
/**
* 尾頁(yè)索引
* @return
*/
@JsonIgnore
public int getLast() {
return last;
}
/**
* 獲取頁(yè)面總數(shù)
* @return getLast();
*/
@JsonIgnore
public int getTotalPage() {
return getLast();
}
/**
* 是否為第一頁(yè)
* @return
*/
@JsonIgnore
public boolean isFirstPage() {
return firstPage;
}
/**
* 是否為最后一頁(yè)
* @return
*/
@JsonIgnore
public boolean isLastPage() {
return lastPage;
}
/**
* 上一頁(yè)索引值
* @return
*/
@JsonIgnore
public int getPrev() {
if (isFirstPage()) {
return pageNo;
} else {
return pageNo - 1;
}
}
/**
* 下一頁(yè)索引值
* @return
*/
@JsonIgnore
public int getNext() {
if (isLastPage()) {
return pageNo;
} else {
return pageNo + 1;
}
}
/**
* 獲取本頁(yè)數(shù)據(jù)對(duì)象列表
* @return List<T>
*/
public List<T> getList() {
return list;
}
/**
* 設(shè)置本頁(yè)數(shù)據(jù)對(duì)象列表
* @param list
*/
public Page<T> setList(List<T> list) {
this.list = list;
initialize();
return this;
}
/**
* 獲取查詢排序字符串
* @return
*/
@JsonIgnore
public String getOrderBy() {
// SQL過(guò)濾，防止注入
String reg = "(?:')|(?:--)|(/\\*(?:.|[\\n\\r])*?\\*/)|"
+ "(\\b(select|update|and|or|delete|insert|trancate|char|into|substr|ascii|declare|exec|count|master|into|drop|execute)\\b)";
Pattern sqlPattern = Pattern.compile(reg, Pattern.CASE_INSENSITIVE);
if (sqlPattern.matcher(orderBy).find()) {
return "";
}
return orderBy;
}
/**
* 設(shè)置查詢排序，標(biāo)準(zhǔn)查詢有效， 實(shí)例： updatedate desc, name asc
*/
public void setOrderBy(String orderBy) {
this.orderBy = orderBy;
}
/**
* 獲取點(diǎn)擊頁(yè)碼調(diào)用的js函數(shù)名稱
* function ${page.funcName}(pageNo){location="${ctx}/list-${category.id}${urlSuffix}?pageNo="+i;}
* @return
*/
@JsonIgnore
public String getFuncName() {
return funcName;
}
/**
* 設(shè)置點(diǎn)擊頁(yè)碼調(diào)用的js函數(shù)名稱，默認(rèn)為page，在一頁(yè)有多個(gè)分頁(yè)對(duì)象時(shí)使用。
* @param funcName 默認(rèn)為page
*/
public void setFuncName(String funcName) {
this.funcName = funcName;
}
/**
* 獲取分頁(yè)函數(shù)的附加參數(shù)
* @return
*/
@JsonIgnore
public String getFuncParam() {
return funcParam;
}
/**
* 設(shè)置分頁(yè)函數(shù)的附加參數(shù)
* @return
*/
public void setFuncParam(String funcParam) {
this.funcParam = funcParam;
}
/**
* 設(shè)置提示消息，顯示在“共n條”之后
* @param message
*/
public void setMessage(String message) {
this.message = message;
}
/**
* 分頁(yè)是否有效
* @return this.pageSize==-1
*/
@JsonIgnore
public boolean isDisabled() {
return this.pageSize==-1;
}
/**
* 是否進(jìn)行總數(shù)統(tǒng)計(jì)
* @return this.count==-1
*/
@JsonIgnore
public boolean isNotCount() {
return this.count==-1;
}
/**
* 獲取 Hibernate FirstResult
*/
public int getFirstResult(){
int firstResult = (getPageNo() - 1) * getPageSize();
if (firstResult >= getCount() || firstResult<0) {
firstResult = 0;
}
return firstResult;
}
/**
* 獲取 Hibernate MaxResults
*/
public int getMaxResults(){
return getPageSize();
}
// /**
// * 獲取 Spring data JPA 分頁(yè)對(duì)象
// */
// public Pageable getSpringPage(){
// List<Order> orders = new ArrayList<Order>();
// if (orderBy!=null){
// for (String order : StringUtils.split(orderBy, ",")){
// String[] o = StringUtils.split(order, " ");
// if (o.length==1){
// orders.add(new Order(Direction.ASC, o[0]));
// }else if (o.length==2){
// if ("DESC".equals(o[1].toUpperCase())){
// orders.add(new Order(Direction.DESC, o[0]));
// }else{
// orders.add(new Order(Direction.ASC, o[0]));
// }
// }
// }
// }
// return new PageRequest(this.pageNo - 1, this.pageSize, new Sort(orders));
// }
//
// /**
// * 設(shè)置 Spring data JPA 分頁(yè)對(duì)象，轉(zhuǎn)換為本系統(tǒng)分頁(yè)對(duì)象
// */
// public void setSpringPage(org.springframework.data.domain.Page<T> page){
// this.pageNo = page.getNumber();
// this.pageSize = page.getSize();
// this.count = page.getTotalElements();
// this.list = page.getContent();
// }
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- Bootstrap Table使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- bootstrap Table的一些小操作
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- Bootstrap Table的使用總結(jié)
- BootStrap 可編輯表Table格
- Bootstrap Table從服務(wù)器加載數(shù)據(jù)進(jìn)行顯示的實(shí)現(xiàn)方法
- Bootstrap table分頁(yè)問(wèn)題匯總
相關(guān)文章
JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法
這篇文章主要介紹了JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法,可實(shí)現(xiàn)javascript針對(duì)頁(yè)面復(fù)選框元素的統(tǒng)計(jì)與提示功能,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序入門之指南針，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
Javascript日期格式化format函數(shù)的使用方法
這篇文章主要介紹的是javascript時(shí)間格式format函數(shù)，我們有時(shí)候調(diào)用的new Date()不是格式化的時(shí)間，可能顯示不是很正常，那么這時(shí)候就需要格式化時(shí)間，今天這里分享一個(gè)javascript的foramt()函數(shù)，有需要的可以參考借鑒。2016-08-08
老生常談javascript中邏輯運(yùn)算符&&和||的返回值問(wèn)題
下面小編就為大家?guī)?lái)一篇老生常談javascript中邏輯運(yùn)算符&&和||的返回值問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
JavaScript監(jiān)聽(tīng)一個(gè)DOM元素大小變化
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)一個(gè)DOM元素大小變化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了JS隨機(jī)漂浮廣告代碼具體實(shí)例，有需要的朋友可以參考一下2013-11-11
使用JS批量選中功能實(shí)現(xiàn)更改數(shù)據(jù)庫(kù)中的status狀態(tài)值（批量展示）
我們?cè)陂_(kāi)發(fā)項(xiàng)目的時(shí)候經(jīng)常會(huì)在后臺(tái)管理時(shí)用到批量展示功能來(lái)動(dòng)態(tài)的修改數(shù)據(jù)庫(kù)的值。下面以修改數(shù)據(jù)庫(kù)的status狀態(tài)值來(lái)實(shí)現(xiàn)批量展示功能2016-11-11
不知不覺(jué)，就到了11月份了，其實(shí)我為啥要寫(xiě)js游戲，覺(jué)得游戲更能引起共鳴。11月份開(kāi)篇之作：是男人就下100層，相信大家都玩過(guò)。2010-11-11
微信小程序?qū)崿F(xiàn)婚禮邀請(qǐng)函全部流程
本文介紹了如何使用微信小程序技術(shù)制作個(gè)性化的婚禮邀請(qǐng)函,包括頁(yè)面布局、交互設(shè)計(jì)和多媒體資源整合,詳細(xì)闡述了從功能需求到頁(yè)面設(shè)計(jì)、測(cè)試優(yōu)化以及發(fā)布流程的全面開(kāi)發(fā)步驟,通過(guò)本項(xiàng)目,可以提升創(chuàng)意設(shè)計(jì)和用戶體驗(yàn)優(yōu)化的能力,需要的朋友可以參考下2024-10-10
微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例
這篇文章主要介紹了微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05