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

后端数据的封装格式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. [Luogu] 维护序列

    https://www.luogu.org/problemnew/show/P2023 线段树双懒标记下放 #include <bits/stdc++.h> using namespace ...

  2. vue项目更换目录后执行npm run dev 就报错(新手进)

    在我们搭建好一个VUE项目的环境后,觉得这个项目存放的位置不好,想移动一下,但是移动后我们发现执行npm run dev就会报下面的错误: 明明只是移动了一下位置,就报错,实在是太恶心了. 但是只要我 ...

  3. codeforces#1163C2. Power Transmission (Hard Edition)(计算几何)

    题目链接: https://codeforces.com/contest/1163/problem/C2 题意: 给出$n$个点,任意两点连接一条直线,求相交直线的对数 数据范围: $1 \le n ...

  4. 利用Python脚本完成一个Fat-tree型的拓扑

    利用Python脚本完成如下图所示的一个Fat-tree型的拓扑(交换机和主机名需与图中一致,即s1~s6,h1~h8) 参考资料 修改代码如下: from mininet.topo import T ...

  5. Amdahl定律和可伸缩性

    性能的思考 提升性能意味着可以用更少的资源做更多的事情.但是提升性能会带来额外的复杂度,这会增加线程的安全性和活跃性上的风险. 我们渴望提升性能,但是还是要以安全为首要的.首先要保证程序能够安全正常的 ...

  6. Ajax传递复杂对象报415

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  7. Java中<? extends T>和<? super T>的理解

    ? 通配符类型 - <? extends T> 表示类型的上界,表示参数化类型的可能是T 或是 T的子类; <? super T> 表示类型下界(Java Core中叫超类型限 ...

  8. spring clound gateway 上传文件,中文文件名乱码解决办法

    先说解决办法吧: 有三种解决办法 1 ,zuul官方给出了解决方案,使用/zuul开头的请求可以避免中文名乱码以及支持大文件上传 域名是 testgateway.com  接口是  api/image ...

  9. UIGestureRecongnizer 手势拦截 对于特殊需求很有用

    手势其实也有代理方法的,通过代理方法可以做到更多关于手势方面的功能 比如在下面的方法中,如果是UIButton的点击就阻止手势的点击事件. // called before touchesBegan: ...

  10. shell 脚本基础与条件判断

    #!shell脚本格式决定专业性 #!/bin/bash #filename:脚本名 #author:作者 #date:时间 #脚本作用 脚本的执行方式  #脚本名为wk.sh 绝对路径 /root/ ...