bootstrap table使用服务端分页

前端代码


// 初始化表格
function initTable() {var $table = $('#table');$table.bootstrapTable('destroy');$table.bootstrapTable({// 请求方法method : "post",// 请求的后台地址url : "./detail.json",// 加载的json格式数据contentType: "application/x-www-form-urlencoded",fixedColumns: true,fixedNumber: 1,// 导出所有数据exportDataType: 'all', // 显示导出showExport: true,// 导出支持类型exportTypes: ['csv', 'txt', 'excel'],// 显示分页开关showPaginationSwitch: false,// 分页pagination: true,// 如果设置了分页，首页页码pageNumber: 0,// 每页的记录行数pageSize: 50,// 可供选择的每页的行数pageList: [50, 100, 200, 300],// 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度height: 700,// 显示间隔颜色striped: true,// 设置为true, 禁止ajax数据缓存cache: false,// 显示搜索框search: false,// 服务端处理分页,客户端处理则为 clientsidePagination: 'server',// 请求服务器携带参数queryParams: queryParams,// 请求成功后,渲染表格responseHandler: responseHandler,// 表格列columns: [[// 两行一列类型{"align": "center","colspan": 1,"field": "table_grabTime","rowspan": 2,"title": "抓取时间","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_dpt_arr","rowspan": 2,"title": "出发-达到","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_flightDate","rowspan": 2,"title": "起飞时间","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_flightNo","rowspan": 2,"title": "航班号","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_share","rowspan": 2,"title": "共享","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_lowStatus","rowspan": 2,"title": "低价状态","valign": "middle"}, // 一行三列类型{"align": "center","colspan": 3,"field": "table_zhixing","rowspan": 1,"title": "智行","valign": "middle"}, // 一行两列类型{"align": "center","colspan": 2,"field": "table_qunar","rowspan": 1,"title": "去哪儿","valign": "middle"}, {"align": "center","colspan": 2,"field": "table_ctrip","rowspan": 1,"title": "携程","valign": "middle"}, {"align": "center","colspan": 2,"field": "table_feizhu","rowspan": 1,"title": "飞猪","valign": "middle"}],[// 一行一列类型{"align": "center","colspan": 1,"field": "table_zhixing_cabin","rowspan": 1,"title": "舱位","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_zhixing_price","rowspan": 1,"title": "价格","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_zhixing_supplier","rowspan": 1,"title": "供应商","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_qunar_cabin","rowspan": 1,"title": "舱位","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_qunar_price","rowspan": 1,"title": "价格","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_ctrip_cabin","rowspan": 1,"title": "舱位","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_ctrip_price","rowspan": 1,"title": "价格","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_feizhu_cabin","rowspan": 1,"title": "舱位","valign": "middle"}, {"align": "center","colspan": 1,"field": "table_feizhu_price","rowspan": 1,"title": "价格","valign": "middle"}]
]});$(window).resize(function () {$table.bootstrapTable('resetView');});// 修正bootstrapTable错误$(".fixed-table-header-columns tr:first th:last").removeAttr("rowspan");}// 请求服务器携带参数function queryParams(params) {// 表格, 追加参数var args = $.param({// 当前页数   0pageNumber : params.offset/params.limit,// 每页显示多少条pageSize : params.limit}) + "&" +$('#searchForm').serialize();return args;}// 请求成功,渲染表格function responseHandler(result) {var temp = {// 下面这两个参数是必须有的, 名称不能变// 总的数量total : result.total,// 数据rows : result.data};return temp;}

服务端

返回数据的封装

封装一列信息: PriceDetail

/*** desc :* create_user : cheng* create_date : 2018/8/10 11:03*/
public class PriceDetail {/*** 抓取时间, 名称要和表格列的field一致*/private String table_grabTime;/*** 出发-到达*/private String table_dpt_arr;/*** 起飞时间*/private String table_flightDate;/*** 航班号*/private String table_flightNo;/*** 共享*/private String table_share;/*** 低价状态*/private String table_lowStatus;/*** 智行*/private String table_zhixing_cabin;private String table_zhixing_price;private String table_zhixing_supplier;/*** 去哪儿*/private String table_qunar_cabin;private String table_qunar_price;/*** 携程*/private String table_ctrip_cabin;private String table_ctrip_price;/*** 飞猪*/private String table_feizhu_cabin;private String table_feizhu_price;public PriceDetail() {}public String getTable_grabTime() {return table_grabTime;}public void setTable_grabTime(String table_grabTime) {this.table_grabTime = table_grabTime;}public String getTable_dpt_arr() {return table_dpt_arr;}public void setTable_dpt_arr(String table_dpt_arr) {this.table_dpt_arr = table_dpt_arr;}public String getTable_flightDate() {return table_flightDate;}public void setTable_flightDate(String table_flightDate) {this.table_flightDate = table_flightDate;}public String getTable_flightNo() {return table_flightNo;}public void setTable_flightNo(String table_flightNo) {this.table_flightNo = table_flightNo;}public String getTable_share() {return table_share;}public void setTable_share(String table_share) {this.table_share = table_share;}public String getTable_lowStatus() {return table_lowStatus;}public void setTable_lowStatus(String table_lowStatus) {this.table_lowStatus = table_lowStatus;}public String getTable_zhixing_cabin() {return table_zhixing_cabin;}public void setTable_zhixing_cabin(String table_zhixing_cabin) {this.table_zhixing_cabin = table_zhixing_cabin;}public String getTable_zhixing_price() {return table_zhixing_price;}public void setTable_zhixing_price(String table_zhixing_price) {this.table_zhixing_price = table_zhixing_price;}public String getTable_zhixing_supplier() {return table_zhixing_supplier;}public void setTable_zhixing_supplier(String table_zhixing_supplier) {this.table_zhixing_supplier = table_zhixing_supplier;}public String getTable_qunar_cabin() {return table_qunar_cabin;}public void setTable_qunar_cabin(String table_qunar_cabin) {this.table_qunar_cabin = table_qunar_cabin;}public String getTable_qunar_price() {return table_qunar_price;}public void setTable_qunar_price(String table_qunar_price) {this.table_qunar_price = table_qunar_price;}public String getTable_ctrip_cabin() {return table_ctrip_cabin;}public void setTable_ctrip_cabin(String table_ctrip_cabin) {this.table_ctrip_cabin = table_ctrip_cabin;}public String getTable_ctrip_price() {return table_ctrip_price;}public void setTable_ctrip_price(String table_ctrip_price) {this.table_ctrip_price = table_ctrip_price;}public String getTable_feizhu_cabin() {return table_feizhu_cabin;}public void setTable_feizhu_cabin(String table_feizhu_cabin) {this.table_feizhu_cabin = table_feizhu_cabin;}public String getTable_feizhu_price() {return table_feizhu_price;}public void setTable_feizhu_price(String table_feizhu_price) {this.table_feizhu_price = table_feizhu_price;}
}

封装后台返回信息: PriceDetailResult

import java.util.ArrayList;
import java.util.List;/*** desc :* create_user : cheng* create_date : 2018/8/10 11:14*/
public class PriceDetailResult {/*** 总数*/private long total;/*** 数据*/private List<PriceDetail> data = new ArrayList<>();public PriceDetailResult() {}public long getTotal() {return total;}public void setTotal(long total) {this.total = total;}public List<PriceDetail> getData() {return data;}public void setData(List<PriceDetail> data) {this.data = data;}}

依次填充PriceDetailResult 的数据即可, 业务逻辑代码不给出

bootstrap table使用服务端分页相关推荐

bootstrap pagewrapper_BootStrap table服务端分页
/** * 初始化 BootStrap Table 的封装 * * 约定:toolbar的id为 (bstableId + "Toolbar") * * @author fengs ...
bootstrap table 服务端分页
bootstrap table分页功能分为前端分页和服务端分页两种,前端分页是一次性把数据全部查询到前端,再在前端页面进行分页,当数据量较少时可以使用前端分页,但当数据量较大时,前端分页就不太适用了, ...
BootStrap Table和Mybatis Plus实现服务端分页
一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...
datatable.js 服务端分页+fixColumns列固定
前言记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
JQuery Datatables 服务端分页简单应用学习
背景介绍最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables.Datatables功能及其强大,基本满足我的所有需求,在加上其插件Edi ...
bootstrap-table+Django: 服务端分页
分页方式: bootstrap-table提供两种分页方式,client和server,即客户端和服务端分页: 特点: client端分页:后台返回所有数据,前台翻页时不再请求后台. server端分 ...
bootstrap table 服务端分页
前端js $(function () {//$('#MDTable').bootstrapTable('destroy');$("#MDTable").bootstrapTable ...
项目实战之服务端分页的实现——SQL
服务端的分页就一个SQL语句就可以搞定,贴出代码后自己慢慢欣赏: CREATE Procedure AppGetEmpList @EID int, @LGID int, @pagesize int, ...
bootstrap table 适应移动端_前端框架bootstrap和layui有什么区别
做前端的小伙伴肯定都用过或听过Bootstrap和LayUi,小编我虽然不是专业的前端程序员,但是对于前端还是颇有研究,闲暇事情会经常研究各种前端框架的源码,一来可以借鉴优秀框架的思想,二来可以顺便学 ...

bootstrap table使用服务端分页

bootstrap table使用服务端分页相关推荐

最新文章

热门文章