这篇文章主要介绍了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();
})

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);

bootstrap table 服务器端分页例子分享的更多相关文章

  1. bootstrap table 服务器端分页例子

    1,前台引入所需的js 可以从官网上下载 function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatV ...

  2. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

  3. bootstrap table 服务器端分页--ashx+ajax

    1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...

  4. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  5. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  6. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

  7. [转]Bootstrap table后端分页(ssm版)

    原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...

  8. Bootstrap table后端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...

  9. Bootstrap table前端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...

随机推荐

  1. 由 Windows 向 Linux 迁移字体 和 Linux 等宽字体

    1. From Windows Windows下字体库的位置为C:\Windows\fonts,这里面包含所有windows下可用的字体.2. To Linux linux的字体库是 /usr/sha ...

  2. Unity3D 之NGUI各种脚本及应用

    这里来介绍一下NGUI的各种脚本的作用,以便以后需要某种效果的时候,去添加相应的脚本去实现效果 UIButton --> 按钮脚本 UIPanel   --> 面板脚本 UIToggle  ...

  3. 20151225jquery学习笔记---折叠菜单UI

    折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了.一. 使用 accordion使用 acco ...

  4. webapp构建工具库

    Meteor:JavaScript App Platform braintree:在线支付 jquery datetimepicker:日期控件 Hotjar Tracking Code:网站追踪 Z ...

  5. 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 ...

  6. powerbulider9.0在数据窗口中实现滚动到新添加行

    powerbuilder9.0对数据窗口进行增加行操作,然后实现滚动到指定行时,应先滚动到指定行dw_1.scrolltorow( row),然后设置新添加的行为当前行dw_1.setrow( row ...

  7. Java——有关日期的方法

    1.日期转换成String格式化输出: public String getDate() { SimpleDateFormat format = new SimpleDateFormat("y ...

  8. 对比iOS中的四种数据存储

    来自于大牛的文章给大家分享下 :http://www.infoq.com/cn/articles/data-storage-in-ios/

  9. react native ios 开发,基础配置笔记。

    一.获取硬件信息,使用react-native-device-info插件,配置说明: 1.首先需要安装组件:npm install react-native-device-info --save 2 ...

  10. C#基础总复习03

    继续更新...接下来就是面向对象的知识了 1.面向对象:概念:使用面向对象的思想进行编程可以让的程序变得扩展性更高,便于维护: 我们在现实生活中去描述一个人的时候,通过描述这个人的特征和行为. 我们在 ...