bootstrap table 服务器端分页例子分享
1,前台引入所需的js 可以从官网上下载
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 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);
bootstrap table 服务器端分页例子分享的更多相关文章
- bootstrap table 服务器端分页例子
1,前台引入所需的js 可以从官网上下载 function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatV ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
- bootstrap table 服务器端分页--ashx+ajax
1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- C# Bootstrap table之 分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
- [转]C# Bootstrap table之 分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...
- [转]Bootstrap table后端分页(ssm版)
原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...
- Bootstrap table后端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...
- Bootstrap table前端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...
随机推荐
- 由 Windows 向 Linux 迁移字体 和 Linux 等宽字体
1. From Windows Windows下字体库的位置为C:\Windows\fonts,这里面包含所有windows下可用的字体.2. To Linux linux的字体库是 /usr/sha ...
- Unity3D 之NGUI各种脚本及应用
这里来介绍一下NGUI的各种脚本的作用,以便以后需要某种效果的时候,去添加相应的脚本去实现效果 UIButton --> 按钮脚本 UIPanel --> 面板脚本 UIToggle ...
- 20151225jquery学习笔记---折叠菜单UI
折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了.一. 使用 accordion使用 acco ...
- webapp构建工具库
Meteor:JavaScript App Platform braintree:在线支付 jquery datetimepicker:日期控件 Hotjar Tracking Code:网站追踪 Z ...
- java.lang.IllegalStateException: You need to use a theme.appcompat theme (or descendant) with this activity
错误描述:java.lang.IllegalStateException: You need to use a theme.appcompat theme (or descendant) with t ...
- powerbulider9.0在数据窗口中实现滚动到新添加行
powerbuilder9.0对数据窗口进行增加行操作,然后实现滚动到指定行时,应先滚动到指定行dw_1.scrolltorow( row),然后设置新添加的行为当前行dw_1.setrow( row ...
- Java——有关日期的方法
1.日期转换成String格式化输出: public String getDate() { SimpleDateFormat format = new SimpleDateFormat("y ...
- 对比iOS中的四种数据存储
来自于大牛的文章给大家分享下 :http://www.infoq.com/cn/articles/data-storage-in-ios/
- react native ios 开发,基础配置笔记。
一.获取硬件信息,使用react-native-device-info插件,配置说明: 1.首先需要安装组件:npm install react-native-device-info --save 2 ...
- C#基础总复习03
继续更新...接下来就是面向对象的知识了 1.面向对象:概念:使用面向对象的思想进行编程可以让的程序变得扩展性更高,便于维护: 我们在现实生活中去描述一个人的时候,通过描述这个人的特征和行为. 我们在 ...