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的人都知道,他是自带分页的,默认分页方式是假分页.也就是一口气把所有的数据从数据库里取出来 ...
随机推荐
- [Luogu] 维护序列
https://www.luogu.org/problemnew/show/P2023 线段树双懒标记下放 #include <bits/stdc++.h> using namespace ...
- vue项目更换目录后执行npm run dev 就报错(新手进)
在我们搭建好一个VUE项目的环境后,觉得这个项目存放的位置不好,想移动一下,但是移动后我们发现执行npm run dev就会报下面的错误: 明明只是移动了一下位置,就报错,实在是太恶心了. 但是只要我 ...
- codeforces#1163C2. Power Transmission (Hard Edition)(计算几何)
题目链接: https://codeforces.com/contest/1163/problem/C2 题意: 给出$n$个点,任意两点连接一条直线,求相交直线的对数 数据范围: $1 \le n ...
- 利用Python脚本完成一个Fat-tree型的拓扑
利用Python脚本完成如下图所示的一个Fat-tree型的拓扑(交换机和主机名需与图中一致,即s1~s6,h1~h8) 参考资料 修改代码如下: from mininet.topo import T ...
- Amdahl定律和可伸缩性
性能的思考 提升性能意味着可以用更少的资源做更多的事情.但是提升性能会带来额外的复杂度,这会增加线程的安全性和活跃性上的风险. 我们渴望提升性能,但是还是要以安全为首要的.首先要保证程序能够安全正常的 ...
- Ajax传递复杂对象报415
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- Java中<? extends T>和<? super T>的理解
? 通配符类型 - <? extends T> 表示类型的上界,表示参数化类型的可能是T 或是 T的子类; <? super T> 表示类型下界(Java Core中叫超类型限 ...
- spring clound gateway 上传文件,中文文件名乱码解决办法
先说解决办法吧: 有三种解决办法 1 ,zuul官方给出了解决方案,使用/zuul开头的请求可以避免中文名乱码以及支持大文件上传 域名是 testgateway.com 接口是 api/image ...
- UIGestureRecongnizer 手势拦截 对于特殊需求很有用
手势其实也有代理方法的,通过代理方法可以做到更多关于手势方面的功能 比如在下面的方法中,如果是UIButton的点击就阻止手势的点击事件. // called before touchesBegan: ...
- shell 脚本基础与条件判断
#!shell脚本格式决定专业性 #!/bin/bash #filename:脚本名 #author:作者 #date:时间 #脚本作用 脚本的执行方式 #脚本名为wk.sh 绝对路径 /root/ ...