1.下载资源:http://v3.bootcss.com/
2.创建html,在head中添加获取设备窗口宽度的配置,并定义好table标签,如下:
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container-fluid "> <table id="tb_departments"></table> </div>
3.在html中引入bootstrap-table的js和css
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../assets/lib/bootstrap-3.3.5/js/bootstrap.js"></script> <script type="text/javascript" src="../../assets/lib/bootstrap-3.3.5/js/bootstrap-table.js"></script> <script type="text/javascript" src="../../assets/lib/bootstrap-3.3.5/js/bootstrap-table-zh-CN.js"></script>
css
<link rel="stylesheet" href="../../assets/lib/bootstrap-3.3.5/css/bootstrap.css"> <link rel="stylesheet" href="../../assets/lib/bootstrap-3.3.5/css/bootstrap-table.css">
4.主要js代码:
var queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 rows: params.limit, //页面大小 page: params.offset / params.limit + 1, //页码 sort: params.sort, //排序字段 order: params.order, //顺序 "cardId": cardId };
$('#tb_departments').bootstrapTable({ url: Servlets.getCardDealInfo(), //请求后台的URL(*) method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortName: 'createTime', sortOrder: "desc", //排序方式 queryParams: queryParams, //传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 30, 50], //可供选择的每页的行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: false, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: 700, //行高,如果没有设置height属性,表格自动根据记录条数决定表格高度 uniqueId: "ID", //每一行的唯一标识,一般为主键列 showToggle: true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 showColumns: false, //不显示列数据选择列表 onlyInfoPagination: false, //显示分页工具条和分页条数信息,true只显示条数,不显示分页条 showPaginationSwitch: false, //分页条显示开关 paginationPreText: "上一页", //自定义上一页按钮显示内容 paginationNextText: "下一页", //下一页按钮显示内容 paginationHAlign: "left", //分页条左对齐,默认右对齐 paginationDetailHAlign: "right", //分页详细信息右对齐,默认左对齐 /*成功获得服务端数据后回调的函数,这里是进行了样式调整*/ onLoadSuccess: function () { $("div[class='pull-left pagination-detail']").attr("class", "pull-left pagination-detail hidden-xs hidden-sm"); $("div[class='pull-right pagination']").attr("class", "pull-right pagination"); }, //定义列内容 columns: [ /*{checkbox: true }, */ //显示选择框 { field: 'orderCode', title: '订单号', valign: 'middle' //垂直对齐 }, { field: 'amount', title: '交易金额', valign: 'middle' }, { field: 'dealType', title: '交易类型', valign: 'middle' }, { field: 'createTime', title: '交易时间', formatter: timeFormater, //格式化字段数据 valign: 'middle' }] }); /** * 时间格式化 * @param value * @param row * @param index * @returns {*} */ var timeFormater = function (value, row, index) { if (index >= 0) { return convertTimestampToLocaleDate(value); } }; var convertTimestampToLocaleDate = function (timestamp) { var date = new Date(timestamp); return date.toLocaleString('en-utf', {hour12: false}); },
5.后台代码:
view:
public class CardDealView { private BigInteger id; private Integer dealType; private BigDecimal amount; private String orderCode; private Date createTime;
ResponsePageView:
/** * Description: <br/> * Description: 通用分页视图 * @author liyang */ public class ResponsePageView<T> { private Integer total = 0; private List<T> rows = Collections.emptyList(); private Integer code = OperationCode.FAIL.getValue(); private String message = OperationCode.FAIL.getReason(); public ResponsePageView() {} public ResponsePageView(Integer total, List<T> rows, Integer code, String message) { this.total = total; this.rows = rows; this.code = code; this.message = message; }
controller:
/** * demo * * @return * @Author liyang * @Date 2017-2-27 14:32:11 */ @RequestMapping(value = "/demo", method = RequestMethod.GET) @ResponseBody public ResponsePageView<CardDealView> demo(@RequestParam int limit, @RequestParam int offset) { List rows = Collections.emptyList(); int i = 0; try { rows = new ArrayList<CardDealView>(); for (; i < 50; i++) { CardDealView cardDealView = new CardDealView(); cardDealView.setId(BigInteger.valueOf(i)); cardDealView.setOrderCode("销售部" + i); cardDealView.setAmount(BigDecimal.valueOf(i + 0.85)); cardDealView.setDealType(1); cardDealView.setCreateTime(new Date(2017, 1, 2, 23, i, i + 9)); rows.add(cardDealView); } } catch (Exception e) { logger.error(e.getMessage()); } return new ResponsePageView<CardDealView>(rows.size(), rows.subList(offset, offset + limit), 1, "success"); }
相关api:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
详情也可参考懒得安分的博客:http://www.cnblogs.com/landeanfen/p/4976838.html