关键词：
spring boot 系列学习记录：http://www.cnblogs.com/jinxiaohang/p/8111057.html
码云源码地址：https://gitee.com/jinxiaohang/springboot
本篇重点介绍bootstrap-table，一款很棒的前端框架，需要bootstrap支持，可以用于数据的展示，后端没有实现数据分页，只是前端将所接收的数据进行分页。
本次练习在之前整合Spring Data JPA基础上进行。
一、下载组件
下载bootstrap-table：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
下载bootstrap：https://v3.bootcss.com/
下载jqurey：http://jquery.com/
下载源码后解压出来，在demo中导入我们想要的代码。
如下图所示：
jquery的一个js文件、
bootstrap的一个js文件、一个css文件、一个字体包
bootstrap-table的两个js文件、一个css文件
二、bootstrap-table使用
在resources下的static中，新建一个html文件添加以下内容：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title> 开始使用 Bootstrap Table </title> <link rel="stylesheet" href="css/bootstrap.min.css"><!--需要添加fonts图标显示才会好--> <link rel="stylesheet" href="css/bootstrap-table.min.css"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.min.js"></script> <script src="js/bootstrap-table-zh-CN.min.js"></script> </head> <body> <div class="container"> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table id="table"></table> </div> </body> <script> $('#table').bootstrapTable({ url: '/api/user/list',//获取所有数据的接口 method: 'get', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 pagination: true, //是否显示分页（*） striped: true, //是否显示行间隔色 //sortOrder: "asc", //排序方式 uniqueId: "userId", //每一行的唯一标识，一般为主键列 pageSize: 10, //每页的记录行数（*） pageList: [5,10,20],//可供选择的每页的行数（*） showRefresh: true, //是否显示刷新按钮 showToggle:true, //是否显示详细视图和列表视图的切换按钮 columns: [{ field: 'userId',//与返回数据对象属性一致 title: 'Item userId'//表头显示 }, { field: 'userName', title: 'Item userName' }, { field: 'password', title: 'Item password' }, ] }); </script>
如果实体不同，只需修改url、和columns。
三、运行效果
接口数据格式展示：
运行效果展示：
每页5条数据
每页10条数据
每页20条数据
显示条数可根据两项修改。
pageSize: 10, //每页的记录行数（*） pageList: [5,10,20], //可供选择的每页的行数（*）
四、总结
没有实现真正意义上的分页，不能缓解后端查询和数据传输的压力，只是bootstrap-table将数据很好展现出来。
bootstrap-table还有更多使用方式参考：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
bootstrap-table问题集
参考;https://www.cnblogs.com/landeanfen/p/4993979.html 1、分页参数sidePagination如果是服务端分页，返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反，如果是客户端分页，这里要返回一个集合对象到... 查看详情
bootstrap-table客户端分页和服务端分页的区别
当服务器没有对数据进行分页时，前端页面设计又要求进行分页，要分开来设置。服务端分页：responseHandler:function(data){returndata.response;},客户端分页，需要指定到rows：sidePagination:"client",responseHandler:function(data){returndata.response.rows;}... 查看详情
bootstrap-table前台和后台分页对json格式的要求
Bootstrap是一款前端非常流行的框架，其中的表格更为大家经常使用。大家都知道表格的分页分为前台和后台分页，也就是表格配置中sidePagination属性，当sidePagination:"server"时表示后台分页，sidePagination:"client"为前台分页。前台分页... 查看详情
第17章：三级缓存处理循环依赖
作者：小傅哥博客：https://bugstack.cn沉淀、分享、成长，让自己和他人都能有所收获！ 查看详情
第19章—后端分页（pagehelper）
springboot系列学习记录：http://www.cnblogs.com/jinxiaohang/p/8111057.html码云源码地址：https://gitee.com/jinxiaohang/springboot PageHelper开源分页工具： https://gitee.com/free/Mybatis_PageHelper https://git 查看详情
bootstrap-table分页怎么和后台联调
参考技术AfunctioninitTable()$('#test-table').bootstrapTable(method:'get',toolbar:'#toolbar',//工具按钮用哪个容器striped:true,//是否显示行间隔色cache:false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pag... 查看详情
第17章(中)--集合
1.ArrayList底层结构和源码分析 ArrayList的全面说明 1) Resizable-arrayimplementationoftheListinterface[ArrayList实现了List的接口，底层是一个数组，并实现可变的功能.]ArrayList属性：transi 查看详情
第17章集群
集群是Redis提供的Redis数据库分布式方案。 为什么需要分布式Redis提高性能。突破单机数据库性能瓶颈。提高可用性。通过主从复制提供故障转移，进一步提高整个系统的稳定性。17.1节点 节点(Nod)是集群(Cluster)基本组... 查看详情
入门到精通❤️「java工程师全栈知识路线」
持续更新中…Vue前端开发章节内容实践练习Vue.js高效前端开发•（实践练习）第1章Vue.js高效前端开发•【一、初识Vue.js】第2章Vue.js高效前端开发•【二、Vue基本指令】第3章Vue.js高效前端开发•【三、Vue列表渲染】第4章V... 查看详情
第17章社区快速入门和模板
IdentityServer组织不维护这些示例。IdentityServer组织愉快地链接到社区模板，但不能对模板做出任何保证。请直接与作者联系。17.1各种ASP.NET核心安全样本https://github.com/leastprivilege/AspNetCoreSecuritySamples17.2IdentityServer4EF和ASP.NETIdentity此... 查看详情
Bootstrap-table：服务端分页+nextPage方法
】Bootstrap-table：服务端分页+nextPage方法【英文标题】：Bootstrap-table:ServerSidepagination+nextPagemethod【发布时间】：2018-04-2903:09:52【问题描述】：我正在使用Django和应用程序Bootstrap-table来正确格式化我的表格。我有很多数据，所以我使... 查看详情
bootstrap-table+thinkphp实现server分页
界面需要：此处不提供文件下载，请自行到官网下载。<linkhref="./css/plugins/bootstrap-table/bootstrap-table.min.css"rel="stylesheet"type="text/css"/><scriptsrc="./js/bootstrap.min.js"type="text/javascript"></scri 查看详情
《构建之法》第4.17章读书笔记
《构建之法》第4.17章读书笔记第四章原文语句： 异常不能跨过DLL或进程的边界来传递信息，所以异常不是万能的。提出问题： 1.什么是DLL？DLL是来解决什么问题的？网上... 查看详情
第17章css边框与背景（上）
第17章CSS边框和背景[上]学习要点：1.声明边框2.边框样式3.圆角边框本章主要探讨HTML5中CSS边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。一．声明边框边框的声明有三个属性设置，样式表如下：属性 值 ... 查看详情
第17章css边框与背景（下）
第17章CSS边框与背景[下]学习要点：1.设置背景本章主要探讨HTML5中CSS边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。一．设置背景盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一... 查看详情
lua_第17章数学库
第17 章数学库 在这一章中（以下关于标准库的几章中相同)我的主要目的不是对每个函数给出完整地说明，而是告诉你标准库可以提供什么功能。为了可以清楚地说明问题，我可能会忽略一些小的选项或... 查看详情
精读《构建之法》第4章与第17章
...获，通过本次阅读我认识了不少之前从未注意过的问题。第4章中提出了许多编程方面的规范和两人合作结对编程的阶段和技巧，第17章有许多生动的故事来形容“人”“效绩”“职业道德”之间的各种道理，并提出了一些令人值... 查看详情
vue.js高效前端开发知识•目录
持续更新中…章节内容实践练习Vue.js高效前端开发•（实践练习）第1章Vue.js高效前端开发•【一、初识Vue.js】第2章Vue.js高效前端开发•【二、Vue基本指令】第3章Vue.js高效前端开发•【三、Vue列表渲染】第4章Vue.js高效前... 查看详情