这篇文章主要介绍了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. List IEnumerable

    //按部门汇总            IEnumerable<WeekReportWithDepartmentInfo> report = summary            .Grou ...

  2. SpringMVC——项目启动时从数据库查询数据

    SpringMVC项目中遇到这样的问题: 1.很多数据字典需要从数据库中查询: 2.懒得修改SQL语句: 3.想在项目中声明静态变量存储数据字典,但是希望这个字典可以在项目启动时进行加载. 当遇到这样 ...

  3. Android开发——避免内存泄露

    本文翻译自Avoiding memory leak——Post by Romain Guy 著作权归原作者所有.转载请注明出处,由JohnTsai翻译 Android应用被分配的堆的大小限制为16MB ...

  4. C++学习(二)

    九.3.内联1)编译器用函数的二进制代码替换函数调用语句,减少函数调用的时间开销.这种优化策略成为内联.2)频繁调用的简单函数适合内联,而稀少调用的复杂函数不适合内联.3)递归函数无法内联.4)通过i ...

  5. Asp.net 上传文件小叙(修改FileUpload显示文字等)

    想要在asp.net网站上上传文件就得用到FileUpload,可是这个控件中“浏览”没法修改,可以使用html中<input type="file" 来解决该问题. 首先页 ...

  6. C#微信公众号开发 -- (三)用户关注之后自动回复

    通过了上一篇文章之后的微信开发者验证之后,我们就可以做微信公众号的代码开发了. 当我们点击关注某个公众号的时候,有时候会发现他会自动给我们回复一条消息,比如欢迎关注XXX公众号.这个功能其实是在点击关 ...

  7. ArcGis for WPF(1)

    这篇文章主要是讲窗体中怎么加载一张在线地图. 第一步:首先引用ESRI.ArcGIS.Client.dll类库. 第二步:在XAML中添加如下代码: <Window x:Class=" ...

  8. ReactNative-----环境搭建二(android)

    一.初始化一个ReactNative项目 在指定目录运行命令:react-native init Vince(项目名称)  //其过程就是在使用CLI工具构建项目, 命令行代码 F:\React> ...

  9. UVA 11991 Easy Problem from Rujia Liu?(vector map)

    Easy Problem from Rujia Liu? Though Rujia Liu usually sets hard problems for contests (for example, ...

  10. Codevs 1427 特种部队(双路DP)

    1427 特种部队 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 黄金 Gold 题目描述 Description 某特种部队接到一个任务,需要潜入一个仓库.该部队士兵分为两路,第一 ...