关键词：
官网资料:https://examples.bootstrap-table.com/#
动态表头
(function(document, window, $)
// Example Bootstrap Table Large Columns
// -------------------------------------
buildTable($('#exampleTableLargeColumns'), 50, 50);
function buildTable($el, cells, rows)
var i, j, row,
columns = [],
data = [];
for (i = 0; i < cells; i++)
columns.push(
field: '字段' + i,
title: '单元' + i
);
for (i = 0; i < rows; i++)
row = ;
for (j = 0; j < cells; j++)
row['字段' + j] = 'Row-' + i + '-' + j;
data.push(row);
$el.bootstrapTable('destroy').bootstrapTable(
columns: columns,
data: data,
iconSize: 'outline',
icons:
columns: 'glyphicon-list'
);
JSON形式
var columns = [],data = [];
//表头
//三个json,三列
columns.push(
field: '2021-5',
title: '2021-5'
,
field: '2021-6',
title: '2021-6'
,
field: '2021-7',
title: '2021-7'
,
field: '2021-8',
title: '2021-8'
);
//表格数据
//三行三json,列数随属性个数变化
data.push(
'2021-5': '门店1',
'2021-6': '门店1',
'2021-7': '门店1'
,
'2021-5': '走访2',
'2021-6': '走访2',
'2021-7': '走访2'
,
'2021-5': '经纪3',
'2021-6': '经纪3',
'2021-7': '经纪3'
,
);效果图
复杂表头:
效果图
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(
//请求方法
method: 'post',
//类型json
dataType: "json",
contentType: "application/x-www-form-urlencoded",
//显示检索按钮
//showSearch: false,
//显示刷新按钮
showRefresh: false,
//显示切换手机试图按钮
showToggle: false,
//显示 内容列下拉框
showColumns: false,
//显示到处按钮
showExport: false,
//显示切换分页按钮
showPaginationSwitch: false,
//最低显示2行
minimumCountColumns: 2,
//是否显示行间隔色
//striped: true,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: false,
//是否显示分页（*）
pagination: true,
//排序方式
sortOrder: "asc",
//初始化加载第一页，默认第一页
pageNumber: 1,
//每页的记录行数（*）
pageSize: 10,
//可供选择的每页的行数（*）
pageList: [10, 25, 50, 100],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "$ctx/ff/server/ffServerSystemCheck/data",
//默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
//queryParamsType:'',
查询参数,每次调用是会带上这个参数，可自定义
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;
,
//分页方式：client客户端分页，server服务端分页（*）
sidePagination: "server",
// contextMenuTrigger:"right",//pc端 按右键弹出菜单
// contextMenuTriggerMobile: "press",//手机端 弹出菜单，click：单击， press：长按。
// contextMenu: '#context-menu',
onClickRow: function (row, $el)
rowId = row.id;
,
onShowSearch: function ()
$("#search-collapse").slideToggle();
,
responseHandler: function (res) //用于接收其他参数
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: '项目名称',
rowspan: 2
,
title: '首页轮播',
colspan: 2,
align: 'center'
,
title: '消息',
colspan: 2,
align: 'center'
,
title: '海报模板',
colspan: 2,
align: 'center'
,
title: '楼盘动态',
colspan: 2,
align: 'center'
,
title: '项目卖点',
colspan: 2,
align: 'center'
,
title: '项目海报',
colspan: 2,
align: 'center'
,
title: '项目视频',
colspan: 2,
align: 'center'
],
[
field: 'newsCount',
title: '更新次数',
,
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: '更新次数'
,
field: 'msgState',
title: '-',
class:'msgTitle',
formatter: function (value, row, index)
if (value=='不合格')
return "<span style=\\"color: red;\\">不合格<span>";
return value;
,
field: 'tempCount',
title: '更新次数'
,
field: 'tempState',
title: '-',
class:'tempTitle',
formatter: function (value, row, index)
if (value=='不合格')
return "<span style=\\"color: red;\\">不合格<span>";
return value;
,
field: 'houseCount',
title: '更新次数'
,
field: 'houseState',
title: '-',
class:'houseTitle',
formatter: function (value, row, index)
if (value=='不合格')
return "<span style=\\"color: red;\\">不合格<span>";
return value;
,
field: 'sellCount',
title: '更新次数'
,
field: 'sellState',
title: '-',
class:'sellTitle',
formatter: function (value, row, index)
if (value=='不合格')
return "<span style=\\"color: red;\\">不合格<span>";
return value;
,
field: 'postCount',
title: '更新次数'
,
field: 'postState',
title: '-',
class:'postTitle',
formatter: function (value, row, index)
if (value=='不合格')
return "<span style=\\"color: red;\\">不合格<span>";
return value;
,
field: 'videoCount',
title: '更新次数'
,
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)) //如果是移动端
$('#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 ()
//重新加载表格参数
// $('#ffServerSystemCheckListTable').bootstrapTable("refreshOptions",
// //url : path + "/api/peopledataInfo/getPeopleInfoList", // 获取数据的地址
// columns : [],
//
// );
//动态表头设置
$.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对象
/**
* Copyright © 2015-2020 <a href="http://www.jeeplus.org/">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;
/**
* 分页类
* @author jeeplus
* @version 2016-7-2
* @param <T>
*/
public class Page<T>
protected int pageNo = 1; // 当前页码
protected int pageSize = Integer.valueOf(Global.getConfig("page.pageSize")); // 页面大小，设置为“-1”表示不进行分页（分页无效）
protected long count;// 总记录数，设置为“-1”表示不查询总数
protected int first;// 首页索引
protected int last;// 尾页索引
protected int prev;// 上一页索引
protected int next;// 下一页索引
private boolean firstPage;//是否是第一页
private boolean lastPage;//是否是最后一页
protected int length = 8;// 显示页面长度
protected int slider = 1;// 前后显示页面长度
private List<T> list = new ArrayList<T>();
private String orderBy = ""; // 标准查询有效， 实例： updatedate desc, name asc
protected String funcName = "page"; // 设置点击页码调用的js函数名称，默认为page，在一页有多个分页对象时使用。
protected String funcParam = ""; // 函数的附加参数，第三个参数值。
private String message = ""; // 设置提示消息，显示在“共n条”之后
public Page()
this.pageSize = -1;
/**
* 构造方法
* @param request 传递 repage 参数，来记住页码
* @param response 用于设置 Cookie，记住页码
*/
public Page(HttpServletRequest request, HttpServletResponse response)
this(request, response, -2);
/**
* 构造方法
* @param request 传递 repage 参数，来记住页码
* @param response 用于设置 Cookie，记住页码
* @param defaultPageSize 默认分页大小，如果传递 -1 则为不分页，返回所有数据
*/
public Page(HttpServletRequest request, HttpServletResponse response, int defaultPageSize)
// 设置页码参数（传递repage参数，来记住页码）
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));
// 设置页面大小参数（传递repage参数，来记住页码大小）
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;
// 设置排序参数
String orderBy = request.getParameter("orderBy");
if (StringUtils.isNotBlank(orderBy))
this.setOrderBy(orderBy);
/**
* 构造方法
* @param pageNo 当前页码
* @param pageSize 分页大小
*/
public Page(int pageNo, int pageSize)
this(pageNo, pageSize, 0);
/**
* 构造方法
* @param pageNo 当前页码
* @param pageSize 分页大小
* @param count 数据条数
*/
public Page(int pageNo, int pageSize, long count)
this(pageNo, pageSize, count, new ArrayList<T>());
/**
* 构造方法
* @param pageNo 当前页码
* @param pageSize 分页大小
* @param count 数据条数
* @param list 本页数据对象列表
*/
public Page(int pageNo, int pageSize, long count, List<T> list)
this.setCount(count);
this.setPageNo(pageNo);
this.pageSize = pageSize;
this.list = list;
/**
* 初始化参数
*/
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) // 如果当前页小于首页
this.pageNo = this.first;
if (this.pageNo > this.last) // 如果当前页大于尾页
this.pageNo = this.last;
/**
* 默认输出当前分页标签
* <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:\\">当前 ");
// 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\\">每页显示 <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>每页 <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) // 如果是首页
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 "";
/**
* 获取分页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("首页："+p.getFirst());
// System.out.println("尾页："+p.getLast());
// System.out.println("上页："+p.getPrev());
// System.out.println("下页："+p.getNext());
//
/**
* 获取设置总数
* @return
*/
public long getCount()
return count;
/**
* 设置数据总数
* @param count
*/
public void setCount(long count)
this.count = count;
if (pageSize >= count)
pageNo = 1;
/**
* 获取当前页码
* @return
*/
public int getPageNo()
return pageNo;
/**
* 设置当前页码
* @param pageNo
*/
public void setPageNo(int pageNo)
this.pageNo = pageNo;
/**
* 获取页面大小
* @return
*/
public int getPageSize()
return pageSize;
/**
* 设置页面大小（最大500）
* @param pageSize
*/
public void setPageSize(int pageSize)
this.pageSize = pageSize <= 0 ? 10 : pageSize;// > 500 ? 500 : pageSize;
/**
* 首页索引
* @return
*/
@JsonIgnore
public int getFirst()
return first;
/**
* 尾页索引
* @return
*/
@JsonIgnore
public int getLast()
return last;
/**
* 获取页面总数
* @return getLast();
*/
@JsonIgnore
public int getTotalPage()
return getLast();
/**
* 是否为第一页
* @return
*/
@JsonIgnore
public boolean isFirstPage()
return firstPage;
/**
* 是否为最后一页
* @return
*/
@JsonIgnore
public boolean isLastPage()
return lastPage;
/**
* 上一页索引值
* @return
*/
@JsonIgnore
public int getPrev()
if (isFirstPage())
return pageNo;
else
return pageNo - 1;
/**
* 下一页索引值
* @return
*/
@JsonIgnore
public int getNext()
if (isLastPage())
return pageNo;
else
return pageNo + 1;
/**
* 获取本页数据对象列表
* @return List<T>
*/
public List<T> getList()
return list;
/**
* 设置本页数据对象列表
* @param list
*/
public Page<T> setList(List<T> list)
this.list = list;
initialize();
return this;
/**
* 获取查询排序字符串
* @return
*/
@JsonIgnore
public String getOrderBy()
// SQL过滤，防止注入
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;
/**
* 设置查询排序，标准查询有效， 实例： updatedate desc, name asc
*/
public void setOrderBy(String orderBy)
this.orderBy = orderBy;
/**
* 获取点击页码调用的js函数名称
* function $page.funcName(pageNo)location="$ctx/list-$category.id$urlSuffix?pageNo="+i;
* @return
*/
@JsonIgnore
public String getFuncName()
return funcName;
/**
* 设置点击页码调用的js函数名称，默认为page，在一页有多个分页对象时使用。
* @param funcName 默认为page
*/
public void setFuncName(String funcName)
this.funcName = funcName;
/**
* 获取分页函数的附加参数
* @return
*/
@JsonIgnore
public String getFuncParam()
return funcParam;
/**
* 设置分页函数的附加参数
* @return
*/
public void setFuncParam(String funcParam)
this.funcParam = funcParam;
/**
* 设置提示消息，显示在“共n条”之后
* @param message
*/
public void setMessage(String message)
this.message = message;
/**
* 分页是否有效
* @return this.pageSize==-1
*/
@JsonIgnore
public boolean isDisabled()
return this.pageSize==-1;
/**
* 是否进行总数统计
* @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 分页对象
// */
// 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));
//
//
// /**
// * 设置 Spring data JPA 分页对象，转换为本系统分页对象
// */
// 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();
//
bootstraptable使用总结
使用bootstraptable可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstraptable的详细使用方法：因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http:... 查看详情
bootstraptable的一些简单使用总结
在GitHub上Bootstrap-table的源码地址是：https://github.com/wenzhixin/bootstrap-tableBootstrap-table的文档地址：http://bootstrap-table.wenzhixin.net.cn/Bootstrap-table的各种样例：https://github.com/wenzhixin/bootstrap-table 查看详情
bootstraptable使用心得总结
...的表格控件，查询到:http://bootstrap-table.wenzhixin.net.cn的BootstrapTable感觉挺不错，但是由于官方的文档不是怎么的完善，导致自己的网络数据请求一直没有通过。今天终于调试通过，在这里与大家分享一下。一、相关... 查看详情
bootstraptable-导出数据(代码片段)
要导出的数据：https://examples.bootstrap-table.com/json/data1.json?order=asc使用的插件（注意插件版本依赖）：tableExport.jquery.plugin代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><titl 查看详情
使用jquery实现对bootstraptable复选框checkbox的动态选中(代码片段)
关于BootStrapTable对复选框checkbox借助JQuery动态选中指定行记录的方法探究业务需求1实现逻辑1.1数据库前置条件1.2具体思路2测试用例使用的BootStrapTable的初始化结构3使用的BootStrapTable主要方法3.1对BootStrapTable进行加载数据的方法ÿ... 查看详情
table.bootstraptable()之基本使用方法(代码片段)
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，Bootstrap-table插件提供了非常丰富的属性设置，... 查看详情
table.bootstraptable()之基本使用方法(代码片段)
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，Bootstrap-table插件提供了非常丰富的属性设置，... 查看详情
table.bootstraptable()之基本使用方法(代码片段)
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，Bootstrap-table插件提供了非常丰富的属性设置，... 查看详情
bootstraptable的使用小结
...一下，毕竟有些时候没有使用到这个方式很有用，在使用bootstraptable的时候，选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据，但是我只需要id这一个值，这个时候进行操作就非常的简单了。$.map(data,function(... 查看详情
bootstraptable的使用小结
...一下，毕竟有些时候没有使用到这个方式很有用，在使用bootstraptable的时候，选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据，但是我只需要id这一个值，这个时候进行操作就非常的简单了。$.map(data,function(... 查看详情
bootstraptable列表增加输入框并保存输入的值不清除(代码片段)
需求：在bootstraptable上增加输入框，需要选择的时候把输入的值保存到row里面，传递给其他模块使用。实现：columns:[...., field:‘myField‘,//自定义字段名称 title:‘输入值‘,//自定义 width:‘5%‘, form... 查看详情
bootstraptable如何使用
最近在使用bootStrapTable的表格功能有一些自己的理解写下来分享一下主要用的是一个bootStrapTable和jquery的混合开发具体怎样引入bootStrapTable我就不一一详解了直接上代码htm代码<tableid="table0"></table>js代码var$table=$(‘#table0‘)... 查看详情
bootstrap框架下表格组件bootstraptable的js代码(代码片段)
JS代码如下：$(function()window.cellEvents=;$('#tb_user').bootstrapTable(url:'/user/findAllSimplePage',//请求后台的urlmethod:'post',//请求方式：post/get//striped:true,//是否显示行 查看详情
python测试开发django-125.bootstraptable获取选中行的数据(代码片段)
前言如何获取bootstrapTable选中的checkbox数据getSelections获取全部选中数据bootstraptable获取全部选中行的数据有2个方法getAllSelections返回所有选定的行包含搜索或过滤，当没有选择记录时，将返回一个空数组。getSelections返回选... 查看详情
bootstraptable中文文档（完整翻译版）(代码片段)
表格参数：名称标签类型默认描述-data-toggleString‘table’不用写JavaScript直接启用表格。classesdata-classesString‘tabletable-hover’表格的类名称。默认情况下，表格是有边框的，你可以添加‘table-no-bordered’来删除表格的边... 查看详情
bootstraptable动态增删改表格内数据(代码片段)
11:添加一个【操作】列23 456title:"操作",7align:‘center‘,8valign:‘middle‘,9width:160,//定义列的宽度，单位为像素px10formatter:function(value,row,index)//传入数据11return‘<buttonclass="btnbtn-primarybtn-sm"onclick="del(\ 查看详情
bootstraptable出现两个表头(代码片段)
代码如下：<tableid="MatOutStockList1"class="tabletable-hover"pagination="true"></table><tableid="MatOutStockList"class="tabletable-hoverno-margins"pagination="true"></table>效果如下：&nb 查看详情
bootstraptable出现两个表头(代码片段)
代码如下：<tableid="MatOutStockList1"class="tabletable-hover"pagination="true"></table><tableid="MatOutStockList"class="tabletable-hoverno-margins"pagination="true"></table>效果如下：&nb 查看详情