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 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  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. UML 用例图,时序图,活动图的定义以及区别

    1.用例图,时序图,活动图的定义 1.用例图:  用例图描述了系统提供的一个功能单元.用例图的主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求,包括基于基本流程的"角色" ...

  2. Oracle系列教程

    推荐博客:http://blog.csdn.net/leshami 具体知识点总结: 1.oracle安装:http://www.cnblogs.com/bluepoint2009/p/oracle- ...

  3. 2014ACM/ICPC亚洲区北京站 上交命题

    A http://acm.hdu.edu.cn/showproblem.php?pid=5112 输入n个时刻和位置,问那两个时刻间速度最快. 解法:按照时间排序,然后依次求相邻两个之间的速度,速度= ...

  4. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  5. 也可以使用如下命令更改您的默认 Shell

    也可以使用如下命令更改您的默认 Shell chsh -s /bin/zsh (需要输入您的密码)

  6. .NET设计模式(13):享元模式(Flyweight Pattern)(转)

    摘要:面向对象的思想很好地解决了抽象性的问题,一般也不会出现性能上的问题.但是在某些情况下,对象的数量可能会太多,从而导致了运行时的代价.那么我们如何去避免大量细粒度的对象,同时又不影响客户程序使用面 ...

  7. PowerDesigner(六)-物理数据模型(PDM逆向工程)(转)

    物理数据模型PDM 物理数据模型(Physical Data Model,PDM):在数据库的逻辑结构设计好之后,就需要完成其物理设计,PDM就是为实现这一目的而设计的. 物理数据模型是以常用的DBM ...

  8. KIP-32 Add timestamps to Kafka message

    通过KIP32,Kafka的每条消息都加进了时间戳,这个KIP在0.10.0.0被加入. 说到“时间”,先贴张图,娱乐一下(如果对星球大战系列电影不熟的话,请自动略过……) 这个KIP的文档在 KIP ...

  9. Codeforces 322B

    B. Ciel and Flowers time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. Unity3D 错误,nativeVideoFrameCallback解决方法。

    原地址:http://blog.csdn.net/alking_sun/article/details/23684733 Unity3D在打包安卓应用的时候,一打开游戏就闪退,接入LogCat之后发现 ...