本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助。

问题1 :服务器端取不到form值,querystring没有问题,但是request.form取不到值

解决:这是ajax的问题,原代码使用原生的ajax。 1可以用读流文件解决。2 如果想用request.form 方式,设置 contentType: "application/x-www-form-urlencoded",$('#tableList').bootstrapTable({

method: 'post',

url: "",

height: $(window).height() - 200,

striped: true,

dataType: "json",

pagination: true,

"queryParamsType": "limit",

singleSelect: false,

contentType: "application/x-www-form-urlencoded",

问题2: 设置传递到服务器的参数

方法:function queryParams(params) {

return {

pageSize: params.limit,

pageNumber: params.pageNumber,

UserName: 4

};

}

$('#tableList').bootstrapTable({

method: 'post',

url: "",

height: $(window).height() - 200,

striped: true,

dataType: "json",

pagination: true,

queryParams: queryParams,

问题3: 后台取不到 pageSize 信息

解决:

1、在queryParams中设置

2、在bootstrap-table.minjs文件 修改源文件为"limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,

修改 bootstrap-table.js 也可以if (this.options.queryParamsType === 'limit') {

params = {

search: params.searchText,

sort: params.sortName,

order: params.sortOrder

};

if (this.options.pagination) {

params.limit = this.options.pageSize;

params.pageNumber=this.options.pageNumber,

params.offset = this.options.pageSize * (this.options.pageNumber - 1);

}

}

3、配置加入 "queryParamsType": "limit",

完整:

$(document).ready(function() {

$('#tableList').bootstrapTable({

method: 'post',

url: "getcompapylist",

height: $(window).height() - 200,

striped: true,

dataType: "json",

pagination: true,

"queryParamsType": "limit",

singleSelect: false,

contentType: "application/x-www-form-urlencoded",

pageSize: 10,

pageNumber:1,

search: false, //不显示 搜索框

showColumns: false, //不显示下拉框(选择显示的列)

sidePagination: "server", //服务端请求

queryParams: queryParams,

//minimunCountColumns: 2,

responseHandler: responseHandler,

columns: [

{

field: 'CompanyId',

checkbox: true

}

{

field: 'qq',

title: 'qq',

width: 100,

align: 'center',

valign: 'middle',

sortable: false

}

,

{

field: 'companyName',

title: '姓名',

width: 100,

align: 'center',

valign: 'middle',

sortable: false

}

]

});

});

function responseHandler(res) {

if (res.IsOk) {

var result = b64.decode(res.ResultValue);

var resultStr = $.parseJSON(result);

return {

"rows": resultStr.Items,

"total": resultStr.TotalItems

};

} else {

return {

"rows": [],

"total": 0

};

}

}

//传递的参数

function queryParams(params) {

return {

pageSize: params.limit,

pageNumber: params.pageNumber,

UserName: 4

};

}

问题4:分页后,重新搜索的问题

前提:自定义搜索且有分页功能,比如搜索产品名的功能.

现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变.

解决:重新设置option就行了.function search(){

$('#tableList').bootstrapTable({pageNumber:1,pageSize:10});

}

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】相关推荐

  1. Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...

  2. bootstraptable控制分页_bootstrap table分页(前后端两种方式实现)

    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

  3. 计算机二级office考试试题分布,计算机二级MS-OFFICE考试ECEL题型汇总附答案.pdf

    计算机二级MS-OFFICE考试ECEL题型汇总附答案 EXCEL (一) 请在[答题]菜单下选择[进入考生文件夹]命令,并按照题目要求完成下面的操作. 注意:以下的文件必须保存在考生文件夹下 小蒋是 ...

  4. 圆与圆的位置关系题目含答案_圆中考数学题汇总附答案

    圆中考数学题汇总附答案 圆的运算是我们必须掌握的一个数学考点,为了帮助大家更好地学习圆的相关考点,百分网小编为大带来一份圆的中考数学题汇总,附答案,有需要的同学可以看一看,更多内容欢迎关注应届毕业生网 ...

  5. Dubbo 面试题汇总(附答案)

    作者 | Dean Wang 来源 | deanwang1943.github.io dubbo是什么 dubbo是一个分布式框架,远程服务调用的分布式框架,其核心部分包含: 集群容错:提供基于接口方 ...

  6. SpringBoot面试题大汇总附答案,SpringBoot面试题-持续更新中

    2021最新SpringBoot面试题[附答案解析]SpringBoot面试题及答案2021,SpringBoot2021最新面试题及答案,SpringBoot面试题新答案已经全部更新完了,有些答案是 ...

  7. bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能

    本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 1,项目要引入freem ...

  8. bootstrap table 分页只显示分页不显示总页数等数据

    搜了下没找到解决方案,就用CSS来解决了. 把paginationDetailHAlign:"right",使pagination-detail的class为.pull-right ...

  9. 计算机设备全年销量excel,计算机二级MS-OFFICE考试EXCEL题型汇总附答案.pdf

    EXCEL (一) 请在[答题]菜单下选择[进入考生文件夹]命令,并按照题目要求完成下面的操作. 注意:以下的文件必须保存在考生文件夹下 小蒋是一位中学教师,在教务处负责初一年级学生的成绩管理.由于学 ...

最新文章

  1. POJ-1122 FDNY to the Rescue!---Dijkstra+反向建图
  2. Struts2 - 处理一个form多个submit
  3. Winform无法加载基类的错误解决
  4. oracle idcs,Oracle Spatial函数SDO_CS.Transform(value)结果非常慢
  5. datagridview绑定与详细说明 (搜集)
  6. java ha_java – Haproxy Bad Gateway 502
  7. ROS的学习(十八)使用rosserial创建一个publisher
  8. CSS3淘宝支付成功打勾动画代码
  9. 全国计算机二级C语言考试难不难?应该怎么备考?
  10. RINEX 3.02版本文件格式介绍
  11. python选择题库和答案_python根据题库答案自动答题
  12. 转-快找个程序员做老公吧
  13. T-Bootstrap-day04-组件、boot的定制、scss基础语法和函数
  14. linux-文件系统管理10-关于存储介质的那些事儿
  15. 二十几岁的女孩应该有这几点思想
  16. 无刷电机和桨叶的选择
  17. Python读写zip压缩文件的方法
  18. Bonjour手把手搭建一:mDNS(apple multicastdns.org)
  19. QT疫情信息管理系统
  20. 算法设计与分析(Java实现)—— 动态规划(入门)斐波那契数列

热门文章

  1. Git 分布式版本管理
  2. HTML4如何让一个DIV居中对齐?float输入日志标题
  3. 任务管理器进程中多个chrome.exe的问题
  4. MongoDB命令及SQL语法对比
  5. 面试必过之消息中间件RabbitMQ面试总结大全!
  6. graphviz画图
  7. js 之 object
  8. spring-data-redis和jedis用法、区别
  9. Ubuntu安装软件失败
  10. request和response一览