关于bootstrap-table服务端分页问题
昨天项目中涉及到了前端表格分页问题。数据一共有1万多条,所以选择了后端分页。
之前用的都是前端分页,第一次使用后端分页。网上也找到了一些例子,最后做出来了。
这里用的是bootstrap-table插件。没有用过的可以点以下链接去看看
bootstrap-table中文文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
bootstrap-table各种例子demo:https://github.com/wenzhixin/bootstrap-table-examples
好了,废话太多
html记得引用插件,然后加入一个table就可以测试了
js代码

$('#YourTable').bootstrapTable({
method: 'get',
contentType: "application/x-www-form-urlencoded",//一种编码。好像在post请求的时候需要用到。这里用的get请求,注释掉这句话也能拿到数据
url:"your-server-url",//要请求数据的文件路径
dataField: "data",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
pageNumber: 1, //初始化加载第一页,默认第一页
pagination:true,//是否分页
queryParams:queryParams,//请求服务器时所传的参数
sidePagination:'server',//指定服务器端分页
pageSize:10,//单页记录数
pageList:[10,20,30,40],//分页步进值
responseHandler:responseHandler,//请求数据成功后,渲染表格前的方法
colums :[{//列参数
field : "id",
title : "id",
},{
field : "name",
title : "名称",
},{
field : "price",
title : "价格"
}]
}) //请求服务数据时所传参数
function queryParams(params){
return {
pageSize : params.limit, //每一页的数据行数,默认是上面设置的10(pageSize)
pageIndex : params.offset/params.limit+1, //当前页面,默认是上面设置的1(pageNumber)
param : "Your Param" //这里是其他的参数,根据自己的需求定义,可以是多个
}
} //请求成功方法
function responseHandler(result){
var errcode = result.errcode;//在此做了错误代码的判断
if(errcode != 0){
alert("错误代码" + errcode);
return;
}
//如果没有错误则返回数据,渲染表格
return {
total : result.dataLength, //总页数,前面的key必须为"total"
data : result.rowDatas //行数据,前面的key要与之前设置的dataField的值一致.
};
}; //刷新表格数据,点击你的按钮调用这个方法就可以刷新
function refresh() {
$('#YourTable').bootstrapTable('refresh', {url: "your-server-url"});
}

后端返回的数据结构
要用后端分页,就必须传页码和每一页行数给后端。而且后端的返回必须要有总数和当前页数据。
如果跟后端约定好,返回的数据格式第一层包含“rows”(行数据)和“total”(总数)。responseHandler可以不用写。
大家只要理解原理,就能按照自己的需求或者限制去做出自己想要的效果了
最后结果如下
关于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 ...
- AngularJS中实现服务端分页
这个教程将介绍在AngularJS应用中的服务端分页处理.在任何涉及到列表或表格数据的应用中都可能会用到分页. 概念 当我们处理异步分页时,每次只从服务器上获取一页数据.也就是说当用户点击第二页,就只 ...
- datatable.js 服务端分页+fixColumns列固定
前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
- 关于bootstrap table的server分页
首先是bootstrap初始化的表格参数: // 初始化Table oTableInit.Init = function() { $('#booksTable').bootstrapTable({ u ...
随机推荐
- postgresql 的一些操作
(4)常用数据库命令(mysql为MySQL数据库操作命令,psql为postgresql数据库命令) 手动重启数据库命令:pg_ctl -D /usr/local/var/postgres -l / ...
- get 与 post 区别
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- Activemq API使用(整合spring)
整合spring之后,主要用的就是org.springframework.jms.core.JmsTemplate的API了,在spring-jms-xxx.jar中. 引入整合需要的jar包: &l ...
- jquery 属性选择器
jquery 属性选择器 第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内 属性带有title的元素即<l ...
- 设置Log文件每天生成一个(wamp)
打开 Wamp的 httpd.conf文件 把下面两句话拷贝进去即可: 1.设置错误log的, " 2.设置访问log的 " common 说明:bin/rota ...
- PHP Mongodb API参考
<?php /*** Mongodb类** examples: * $mongo = new HMongodb("127.0.0.1:11223"); * $mongo-&g ...
- pip使用的基本命令
基本的命令解释,如下图: 安装 sudo easy_install pip 列出已安装的包 pip freeze or pip list 导出requirements.txt pip freeze & ...
- 121、Django rest framework入门使用
框架介绍 为你的django平台通过model生成对应的restfull api,并可以通过对应的http接口来进行 post .get.put.delete等操作.本文是也并非入门级别,不会带你去了 ...
- UML建模概述
UML的组成主要有事物.图.关系. UML中的事物: (1)构件事物:UML模型的静态部分,描述概念或物理元素,包括以下 a. 类:类是对一组具有相同属性.相同操作.相同关系和相同语义的对象的抽象.包 ...
- flask在centos下搭建web服务【uwsgi,nginx】
centos操作系统 uWSGI是一个web服务器,Nginx进行反向代理的其实跟这些服务器可以说没有任何关系,你提供动态内容的服务器可以是apache/nginx/tomcat,当然也可以是uWSG ...