由于数据库查询的数据过多,所以采取服务端分页的操作,避免一次性加载的数据量过多,导致页面加载缓慢。

后端数据的封装格式json数据

rows里的数据是当前页的数据,total是总条数:

{
"total": 200,
"rows": [{
"name": "张三",
"age": 23
}, {
"name": "张三",
"age": 23
}]
}

其中

total:是查询的数据总条数,可以自定义;

row:返回的是数据内容;

前端bootstrap-table接收

1.页面上定义表格加载的位置

<table id= "quaTable"  style="background-color:#FFF;!important;" >
</table>

2.js脚本里加载bootstrap-table的内容

var queryParams = function (params) {
var param = {
//每页多少条数据
pageSize: params.limit,
//请求第几页
pageIndex:params.offset+1,
task_title :$("#query_task_title").val(),
req_no :$("#query_req_no").val()
}
return param;
} function queryData(){
$("#quaTable").bootstrapTable('destroy'); //在初始化table之前,要将table销毁,否则会保留上次加载的内容
$('#quaTable').bootstrapTable({
url: "/defect/getList", //请求后台的URL(*)
method: 'post', //请求方式(*)
contentType : "application/x-www-form-urlencoded",
toolbar: '#toolbar',
striped: true, //是否显示行间隔色
queryParams: //传递参数(*)
function (params) {
var param = {
//每页多少条数据
pageSize: params.limit,
//请求第几页
pageIndex:params.offset+1,
task_title :$("#query_task_title").val(),
req_no :$("#query_req_no").val()
}
return param;
},
clickToSelect: true, //是否启用点击选中行
pagination: true,
//分页方式:client客户端分页,server服务端分页(*)
sidePagination: "server",
pageList: [10, 15, 20, 25, 30],
pageNumber:1,
pageSize: 10,
columns:
[ {field: 'selectItem', radio: true},
{title: '姓名', field: 'name' },
{title: '年龄', field: 'age'}
],
responseHandler:function (res) {
return {
"rows": res.rows,
"total": res.total
};
},
showExport: true,
onPostBody : function(){
$("#quaTable tbody tr:nth-child(odd)").addClass("oddColor");
},
onLoadSuccess : function() { //加载成功时执行
$('#quaTable').bootstrapTable('hideColumn', 'RESPONSIBLE_PERSON');
}
});

bootstrap-table服务端分页操作的更多相关文章

  1. BootStrap table服务端分页

    涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...

  2. asp.net mvc bootstrap datatable 服务端分页

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...

  3. asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载  密码:0ea1 先上图[ jqueryui风格] ...

  4. bootstrap Table 服务端处理分页 后台是.net

    要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来 function HQCreatTables(ob) { var option = { method: 'get', dataType ...

  5. AntDesign vue学习笔记(八)Table服务端分页使用

    本文是AntDesign后端分页方法 1.设置pagination <a-table :columns="columns" :dataSource="data&qu ...

  6. BootStrap Table和Mybatis Plus实现服务端分页

    一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...

  7. 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...

  8. datatable.js 服务端分页+fixColumns列固定

    前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...

  9. Angularjs的真分页,服务端分页,后台分页的解决方案

    背景:项目的框架使用的是Angularjs,在做数据展示的时候,使用的是ng-table.用过ng-table的人都知道,他是自带分页的,默认分页方式是假分页.也就是一口气把所有的数据从数据库里取出来 ...

随机推荐

  1. java实现上传文件夹

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...

  2. linux系统编程--信号

    信号的概念 man 7 siganl  查看man手册 信号在我们的生活中随处可见, 如:古代战争中摔杯为号:现代战争中的信号弹:体育比赛中使用的信号枪......他们都有共性:1. 简单 2. 不能 ...

  3. 《30天自制操作系统》学习笔记--Mac环境搭建

    弄了三天了,终于弄好了,先说结果,就是作者在网站上放了os x的工具(hrb.osask.jp,也有linux下的工具,可以自己去下载),也就是说我白忙活了三天... 再说一下这几天都干啥了,主要是想 ...

  4. JS如何实现在微信中调用外部浏览器打开指定链接

    使用方法,复制以下贴到index.php 顶部就可以了.场景 比如网页包含视频播放  在QQ\WX打开QQ\WX直接调用自己的播放器播放,而且播放完成还有AD推送,非常恶心,所以有了以下代码有乱码的话 ...

  5. 在docker 安装gitlab

    一.Centos 7 上安装 官方文档:https://docs.docker.com/install/linux/docker-ce/centos/ 1.安装环境      yum install  ...

  6. Windows环境安装MySQL8.0.11

    网络开发数据库是必不可少的.曾经安装个Mysql,但是忘了.再次安装还是得百度.那还不如自己写篇博客记录一下呢,以后再忘记就看自己的博客好 Mysql官网安装地址(windows环境): https: ...

  7. 微服务RESTful 接口设计规范

    1.RESTful发展背景及简介 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......).因此,必须有一种统一的机制,方便不同的前 ...

  8. Flutter移动电商实战 --(1)项目学习记录

    1.项目相关截图 2.项目知识点梳理图 Dio2.0: Dio是一个强大的 Dart Http 请求库,支持 Restful API.FormData.拦截器.请求取消等操作. Swiper: Swi ...

  9. P4104 [HEOI2014]平衡

    友情提醒:取模太多真的会TLE!!! P4104 [HEOI2014]平衡 题解 本题属于 DP-整数划分 类问题中的 把整数 n 划分成 k 个不相同不大于 m 的正整数问题 设置DP状态  f[ ...

  10. @Transactional(事务讲解)和springboot 整合事务

    概述 事务在编程中分为两种:声明式事务处理和编程式事务处理 编程式事务处理:编码方式实现事务管理,常与模版类TransactionTemplate(推荐使用) 在业务代码中实现事务. 可知编程式事务每 ...