• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >bootstrap > bootstrap table 服务器端分页例子分享

bootstrap table 服务器端分页例子分享

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含bootstrap table例子,bootstrap table,bootstrap table样式,bootstraptable api,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();
})
</div>

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

以上所述就是本文的全部内容了,希望小伙伴们能够喜欢。

</div>

您可能想查找下面的文章:

  • bootstrap table 服务器端分页例子分享

相关文章

  • 2017-05-30Bootstrap每天必学之附加导航(Affix)插件
  • 2017-05-30Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创
  • 2017-05-22Bootstrap 提示工具(Tooltip)插件
  • 2017-05-30全面解析bootstrap格子布局
  • 2017-05-30Bootstrap按钮下拉菜单组件详解
  • 2017-05-30Bootstrap轮播插件使用代码
  • 2017-05-30Bootstrap每天必学之响应式导航、轮播图
  • 2017-05-30Bootstrap下拉菜单效果实例代码分享
  • 2017-05-30bootstrap布局中input输入框右侧图标点击功能
  • 2017-05-22Bootstrap CSS编码规范

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 全面解析bootstrap格子布局
    • Bootstrap下拉菜单效果实例代码分享
    • Vue.js bootstrap前端实现分页和排序
    • JS组件Bootstrap实现弹出框效果代码
    • Bootstrap实现默认导航栏效果
    • 值得分享的Bootstrap Table使用教程
    • Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创
    • Angular.js与Bootstrap相结合实现表格分页代码
    • Bootstrap源码解读下拉菜单(4)
    • 利用bootstrapValidator验证UEditor

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有