bootstrap table 服务端分页

bootstrap table分页功能分为前端分页和服务端分页两种，前端分页是一次性把数据全部查询到前端，再在前端页面进行分页，当数据量较少时可以使用前端分页，但当数据量较大时，前端分页就不太适用了，一次性查询大量数据耗费大量时间，有时会造成系统崩溃。这时，可以使用服务端分页。服务端分页的原理是根据设置的每页显示数据条数，每次只从数据库中查出这么多数据，这样可以大大减少查询时长，快速响应前端需求。
使用bootstrap table需要引入一些css和js文件，这里不再赘述。
一、前端代码
1.设置表格

<div class="main-wrap"><div><!-- 所有设备查询管理 --><div id="prizeToolbar"><div class="btn-group"><table id="tb_allEqument" class="table table-hover table-striped table-condensed"></table></div></div></div></div>

2。初始化和配置表格

function tableInit() {$('#tb_allEqument').bootstrapTable({url: "/hzsh/eomc-jxpj/sheBeiPcct/allEquipment/fenYelist",         //请求后台的URL（*）method: 'POST',                      //请求方式（*）toolbar: '#toolbar',                //工具按钮用哪个容器striped: true,                      //是否显示行间隔色cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）sortable: true,                     //是否启用排序sortOrder: "asc",                   //排序方式//------分页信息配置--------pagination: true,                   //是否显示分页（*）sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）pageNumber:1,                       //初始化加载第一页，默认第一页pageSize: 5,                       //每页的记录行数（*）pageList: [10, 20, 30, 50],        //可供选择的每页的行数（*）paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>strictSearch: true,                 //指定全匹配搜索showColumns: true,                  //是否显示所有的列showRefresh: true,                  //是否显示刷新按钮minimumCountColumns: 2,             //最少允许的列数clickToSelect: false,                //是否启用点击选中行uniqueId: "id",                      //每一行的唯一标识，一般为主键列showToggle:false,                    //是否显示详细视图和列表视图的切换按钮cardView: false,                    //是否显示详细视图detailView: false,                   //是否显示父子表showExport: true,                   //是否显示导出按钮exportDataType: "all",//导出表格方式（默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据）exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel','xlsx'],//导出文件类型buttonsAlign:"right",               //按钮位置Icons:'glyphicon-export',           //按钮图标queryParams: function(params) {var eomcJxpjLHSheBeiFengYeEntity = {//向服务端传递以下两个参数，服务端获取这两个参数后，加入到sql语句中进行                    分页查询limit:params.limit, // 每页显示数量offset:params.offset // SQL语句起始索引}var temp = { equCode2:$("#q_equCode").val(),equName2:$("#q_equName").val(),equTypeName:$("#q_equType").val() ,eomcJxpjLHSheBeiFengYeEntity:eomcJxpjLHSheBeiFengYeEntity}return JSON.stringify(temp);},columns: [{checkbox: true}, {field : 'number',title : '序号',align : 'center',width : 70,visible : true,formatter : function(value, row, index) {return index + 1;}}, {field: 'id',visible: false}, {field: 'equCode2',title: '设备编号',sortable: true,align:'center',visible: true,escape: true}, {field: 'equName2',title: '设备名称',sortable: true,align:'center',escape: true}, {field: 'equTypeName',title: '设备类别',align:'center',sortable: false,escape: true}],});
};

二、后端代码
1、实体类
这里创建了两个实体类，一个是数据类，一个是分页信息类

分页信息类：

@Data
public class EomcJxpjLHSheBeiFengYeEntity {private int limit ;private int offset;}

数据类：

@Data
public class EomcJxpjlhSheBeipcctEntity {private String id;private String equCode2;private String equName2;private String equTypeName;private String istt;//分页信息类（这里因为前端传参样式的缘故，所以把分页信息类作为了数据类的一个属性）private EomcJxpjLHSheBeiFengYeEntity eomcJxpjLHSheBeiFengYeEntity;}

dao层 mapper

@Mapper
public interface EomcJxpjlhSheBeipcctMapper{/*** sql层分页语句（用的sqlserver数据库，使用top函数）：*  select top linit * from EquList2 where id not in*    (select top offset id from EquList2) *   limit表示每页多少数据，offset表示数据记录索引* 示例：*   select top 10 * from EquList2 where id not in*    (select top 0 id from EquList2) *   该语句表示从数据库表中下标索引0（第一条数据）的数据开始取10条数据*/@Select("select top ${limit} id,EquCode2,EquName2,EquTypeName,is_tt from EquList2  where id not in\r\n" + "(select top ${offset} id from EquList2)")List<EomcJxpjlhSheBeipcctEntity> query(int limit,int offset);//获取数据库中所有数据记录的条数@Select("select count(1) from EquList2")int queryCount();}

web层 controller


@Controller
@RequestMapping("/hzsh/eomc-jxpj/sheBeiPcct")
public class EomcJxpjlhSheBeipcctController {@Autowiredprivate EomcJxpjlhSheBeipcctMapper eomcJxpjlhSheBeipcctMapper;//前端传递参数为数据实体类@ResponseBody@RequestMapping("/allEquipment/fenYelist")public JSONObject list02(@RequestBody(required = false) EomcJxpjlhSheBeipcctEntity eomcJxpjlhSheBeipcctEntity) {//获取分页信息类EomcJxpjLHSheBeiFengYeEntity eomcJxpjLHSheBeiFengYeEntity = eomcJxpjlhSheBeipcctEntity   .getEomcJxpjLHSheBeiFengYeEntity();//每页显示数据条数   int limit = eomcJxpjLHSheBeiFengYeEntity.getLimit();//数据库查询索引起始值int offset = eomcJxpjLHSheBeiFengYeEntity.getOffset();// 查询数据总的数据条数int total = eomcJxpjlhSheBeipcctMapper.queryCount();// 按照分页信息查询部分数据List<EomcJxpjlhSheBeipcctEntity> equList = eomcJxpjlhSheBeipcctMapper.query(limit, offset);JSONObject res = new JSONObject();JSONArray resArray = new JSONArray();//将分页查询出的数据依次添加到JSON数组中for (EomcJxpjlhSheBeipcctEntity e : equList) {JSONObject resIndex = new JSONObject();resIndex.put("equCode2", e.getEquCode2());resIndex.put("equName2", e.getEquName2());resIndex.put("equTypeName", e.getEquTypeName());resArray.add(resIndex);}//total为全部数据条数,bootstrap table可自动获取后端传来的total数据res.put("total", total);//rows为分页查询出的数据，bootstrap table可自动解析该数据res.put("rows", resArray);return res;}
}

效果如下：

bootstrap table 服务端分页相关推荐

bootstrap table 服务端分页
前端js $(function () {//$('#MDTable').bootstrapTable('destroy');$("#MDTable").bootstrapTable ...
bootstrap pagewrapper_BootStrap table服务端分页
/** * 初始化 BootStrap Table 的封装 * * 约定:toolbar的id为 (bstableId + "Toolbar") * * @author fengs ...
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使用服务端分页
前端代码 // 初始化表格 function initTable() {var $table = $('#table');$table.bootstrapTable('destroy');$table ...
项目实战之服务端分页的实现——SQL
服务端的分页就一个SQL语句就可以搞定,贴出代码后自己慢慢欣赏: CREATE Procedure AppGetEmpList @EID int, @LGID int, @pagesize int, ...
Jquery DataTable服务端分页的最佳实现
2019独角兽企业重金招聘Python工程师标准>>> index.html <!DOCTYPE html> <html> <head><t ...

bootstrap table 服务端分页

bootstrap table 服务端分页相关推荐

最新文章

热门文章