bootstrap table 服务器端分页例子分享
2024-09-24 20:38:39
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下
1,前台引入所需的js 可以从官网上下载
复制代码代码如下:
function getTab(){
var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm';
$('#tab').bootstrapTable({
method: 'get', //这里要设置为get,不知道为什么 设置post获取不了
url: url,
cache: false,
height: 400,
striped: true,
pagination: true,
pageList: [10,20],
// contentType: "application/x-www-form-urlencoded",
pageSize:10,
pageNumber:1,
search: true,
sidePagination:'server',//设置为服务器端分页
queryParams: queryParams,//参数
showColumns: true,
showRefresh: true,
minimumCountColumns: 2,
clickToSelect: true,
smartDisplay:true,
columns: [
{
field: 'interfaceInfoCode',
title: '资金通道编码',
align: 'center',
width: '180',
valign: 'bottom',
sortable: true
}, {
field: 'retreatBatchCode',
title: '资金退回批次号',
align: 'center',
width: '200',
valign: 'middle',
sortable: true
}, {
field: 'total',
title: '总笔数',
align: 'center',
width: '10',
valign: 'top',
sortable: true
}, {
field: 'totalMoney',
title: '总金额',
align: 'center',
width: '100',
valign: 'middle',
clickToSelect: false
}, {
title: '操作',
field: 'state',
align: 'center',
width: '200',
valign: 'middle',
}]
});
}
//设置传入参数
function queryParams(params) {
return params
}
$(function(){
getTab();
})
var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm';
$('#tab').bootstrapTable({
method: 'get', //这里要设置为get,不知道为什么 设置post获取不了
url: url,
cache: false,
height: 400,
striped: true,
pagination: true,
pageList: [10,20],
// contentType: "application/x-www-form-urlencoded",
pageSize:10,
pageNumber:1,
search: true,
sidePagination:'server',//设置为服务器端分页
queryParams: queryParams,//参数
showColumns: true,
showRefresh: true,
minimumCountColumns: 2,
clickToSelect: true,
smartDisplay:true,
columns: [
{
field: 'interfaceInfoCode',
title: '资金通道编码',
align: 'center',
width: '180',
valign: 'bottom',
sortable: true
}, {
field: 'retreatBatchCode',
title: '资金退回批次号',
align: 'center',
width: '200',
valign: 'middle',
sortable: true
}, {
field: 'total',
title: '总笔数',
align: 'center',
width: '10',
valign: 'top',
sortable: true
}, {
field: 'totalMoney',
title: '总金额',
align: 'center',
width: '100',
valign: 'middle',
clickToSelect: false
}, {
title: '操作',
field: 'state',
align: 'center',
width: '200',
valign: 'middle',
}]
});
}
//设置传入参数
function queryParams(params) {
return params
}
$(function(){
getTab();
})
2 后台
获取limit offset ,有些网站上 要格式化传入参数 获取pageSize,pageIndex 反正我是没有成功,如果知道 可以分享给我
复制代码代码如下:
int currentPage = request.getParameter("offset") == null ? 1 : Integer.parseInt(request.getParameter("offset"));
// 每页行数
int showCount = request.getParameter("limit") == null ? 10 : Integer.parseInt(request.getParameter("limit"));/
if (currentPage != 0) {// 获取页数
currentPage = currentPage / showCount;
}
currentPage += 1;
JSONObject json = new JSONObject();
json.put("rows", bfrv); //这里的 rows 和total 的key 是固定的
json.put("total", total);
// 每页行数
int showCount = request.getParameter("limit") == null ? 10 : Integer.parseInt(request.getParameter("limit"));/
if (currentPage != 0) {// 获取页数
currentPage = currentPage / showCount;
}
currentPage += 1;
JSONObject json = new JSONObject();
json.put("rows", bfrv); //这里的 rows 和total 的key 是固定的
json.put("total", total);
最新文章
- 对最近的RTP和H264学习进行总结整理-04.20
- Net框架下-ORM框架LLBLGen的简介
- Qt 之 去除窗口部件被选中后的焦点虚线框(设置Qt::NoFocus即可)
- Careercup - Google面试题 - 4857362737266688
- jQuery--隐藏事件
- C#算法基础之希尔排序
- EXTJS 4.2 资料 控件之textfield文本框加事件的用法
- 安卓天天练练(五)CompoundButton
- Servlet的接口实现类
- DevC++ 工程没有调试信息的解决办法
- Kettle启动及简单操作(1)
- [Hadoop] - TaskTracker源码分析
- 关于makefile中变量的多次赋值以及override指令
- Druid数据库连接池就这么简单
- java web----URL
- kafka集群方案教程
- 大臣的旅费---树的直径(dfs)
- Scala进阶之路-Spark本地模式搭建
- Jenkins Post Build网址
- Java Session 会话技术