本文为大家分享了bootstrap Table的使用方法,供大家参考,具体内容如下
官网资料
效果图:
案例:
html
ID | --%> <%--Item Name | --%> <%--Item Price | --%> <%--
---|
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 "不合格";
}
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 "不合格";
}
return value;
}
}
, {
field: 'tempCount',
title: '更新次数'
}, {
field: 'tempState',
title: '-',
class:'tempTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "不合格";
}
return value;
}
},
{
field: 'houseCount',
title: '更新次数'
}, {
field: 'houseState',
title: '-',
class:'houseTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "不合格";
}
return value;
}
},
{
field: 'sellCount',
title: '更新次数'
}, {
field: 'sellState',
title: '-',
class:'sellTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "不合格";
}
return value;
}
},
{
field: 'postCount',
title: '更新次数'
}, {
field: 'postState',
title: '-',
class:'postTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "不合格";
}
return value;
}
}, {
field: 'videoCount',
title: '更新次数'
}
, {
field: 'videoState',
title: '-',
class:'videoTitle',
formatter: function (value, row, index) {
if (value=='不合格') {
return "不合格";
}
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 Mapdata(HttpServletRequest request, HttpServletResponse response) { Page page = server.findWebPage(new Page (request, response)); Map map = new HashMap (); map.put("rows", page.getList()); map.put("total", page.getCount()); return data; }
xml:
Page对象
/** * Copyright © 2015-2020 JeePlus 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*/ public class Page { 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 list = new ArrayList (); 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 ()); } /** * 构造方法 * @param pageNo 当前页码 * @param pageSize 分页大小 * @param count 数据条数 * @param list 本页数据对象列表 */ public Page(int pageNo, int pageSize, long count, List 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; } } /** * 默认输出当前分页标签 * ${page}*/ @Override public String toString() { StringBuilder sb = new StringBuilder(); sb.append(""); // sb.append(""); // sb.append(""); // sb.append(""); long startIndex = (pageNo-1)*pageSize + 1; long endIndex = pageNo*pageSize <=count? pageNo*pageSize:count; sb.append("当前 "); // sb.append(" / "); // sb.append(" 条,"); // sb.append("共 " + count + " 条"+(message!=null?message:"")+" \n"); // sb.append(""); sb.append("显示第 "+startIndex+" 到第 "+ endIndex +" 条记录,总共 "+count+" 条记录"); sb.append("每页显示 "); sb.append(""); sb.append(" 条记录 "); sb.append(""); sb.append(""); // sb.append("每页 条记录,显示 " +startIndex+ " 到 "+ endIndex +" 条,共 "+count+" 条
"); // sb.append("
");
sb.append("
");
sb.append("- ");
if (pageNo == first) {// 如果是首页
sb.append("