bootstrap-table服务端分页操作
由于数据库查询的数据过多,所以采取服务端分页的操作,避免一次性加载的数据量过多,导致页面加载缓慢。
后端数据的封装格式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服务端分页操作的更多相关文章
- BootStrap table服务端分页
涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...
- asp.net mvc bootstrap datatable 服务端分页
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...
- asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载 密码:0ea1 先上图[ jqueryui风格] ...
- bootstrap Table 服务端处理分页 后台是.net
要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来 function HQCreatTables(ob) { var option = { method: 'get', dataType ...
- AntDesign vue学习笔记(八)Table服务端分页使用
本文是AntDesign后端分页方法 1.设置pagination <a-table :columns="columns" :dataSource="data&qu ...
- BootStrap Table和Mybatis Plus实现服务端分页
一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...
- datatable.js 服务端分页+fixColumns列固定
前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
- Angularjs的真分页,服务端分页,后台分页的解决方案
背景:项目的框架使用的是Angularjs,在做数据展示的时候,使用的是ng-table.用过ng-table的人都知道,他是自带分页的,默认分页方式是假分页.也就是一口气把所有的数据从数据库里取出来 ...
随机推荐
- java实现上传文件夹
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...
- linux系统编程--信号
信号的概念 man 7 siganl 查看man手册 信号在我们的生活中随处可见, 如:古代战争中摔杯为号:现代战争中的信号弹:体育比赛中使用的信号枪......他们都有共性:1. 简单 2. 不能 ...
- 《30天自制操作系统》学习笔记--Mac环境搭建
弄了三天了,终于弄好了,先说结果,就是作者在网站上放了os x的工具(hrb.osask.jp,也有linux下的工具,可以自己去下载),也就是说我白忙活了三天... 再说一下这几天都干啥了,主要是想 ...
- JS如何实现在微信中调用外部浏览器打开指定链接
使用方法,复制以下贴到index.php 顶部就可以了.场景 比如网页包含视频播放 在QQ\WX打开QQ\WX直接调用自己的播放器播放,而且播放完成还有AD推送,非常恶心,所以有了以下代码有乱码的话 ...
- 在docker 安装gitlab
一.Centos 7 上安装 官方文档:https://docs.docker.com/install/linux/docker-ce/centos/ 1.安装环境 yum install ...
- Windows环境安装MySQL8.0.11
网络开发数据库是必不可少的.曾经安装个Mysql,但是忘了.再次安装还是得百度.那还不如自己写篇博客记录一下呢,以后再忘记就看自己的博客好 Mysql官网安装地址(windows环境): https: ...
- 微服务RESTful 接口设计规范
1.RESTful发展背景及简介 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......).因此,必须有一种统一的机制,方便不同的前 ...
- Flutter移动电商实战 --(1)项目学习记录
1.项目相关截图 2.项目知识点梳理图 Dio2.0: Dio是一个强大的 Dart Http 请求库,支持 Restful API.FormData.拦截器.请求取消等操作. Swiper: Swi ...
- P4104 [HEOI2014]平衡
友情提醒:取模太多真的会TLE!!! P4104 [HEOI2014]平衡 题解 本题属于 DP-整数划分 类问题中的 把整数 n 划分成 k 个不相同不大于 m 的正整数问题 设置DP状态 f[ ...
- @Transactional(事务讲解)和springboot 整合事务
概述 事务在编程中分为两种:声明式事务处理和编程式事务处理 编程式事务处理:编码方式实现事务管理,常与模版类TransactionTemplate(推荐使用) 在业务代码中实现事务. 可知编程式事务每 ...