SpingBoot-Thymeleaf-bootstrapTable-分页之H5
H5
//初始化页数
$('#userListTable')
.bootstrapTable(
{
url : 'sys/user-list.json',
method : 'post', //请求方式()
dataType : 'json',
contentType : "application/x-www-form-urlencoded",
showExport : true, //是否显示导出按钮
exportDataType : "all", //basic'导出当前页, 'all'导出全部, 'selected'导出选中项.
toolbar : '#toolbar', //工具按钮用哪个容器
undefinedText : "-",//当数据为 undefined 时显示的字符
striped : true, //是否显示行间隔色
cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性()
pagination : true, //是否显示分页()
pageSize : 5, //每页显示的记录数
pageNumber : 1, //当前第几页
pageList : [5,10, 15, 20, 25 ], //记录数可选列表
sortable : false, //是否启用排序
sortOrder : "asc", //排序方式
sidePagination : "server", //分页方式:client客户端分页,server服务端分页()
查询参数,每次调用是会带上这个参数,可自定义
queryParams : queryParams,
search : false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch : true,
showColumns : true, //是否显示所有的列
showRefresh : true, //是否显示刷新按钮
minimumCountColumns : 4, //最少允许的列数
responseHandler : responseHandler,
//clickToSelect: true, //是否启用点击选中行
//height: 600, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId : "id", //每一行的唯一标识,一般为主键列
showToggle : true, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
detailView : false, //是否显示父子表
columns : [
{
checkbox : true,
formatter: function (i,row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
if($.inArray(row.id,overAllIds)!=-1){// 因为 判断数组里有没有这个 id
return {
checked : true // 存在则选中
}
}
}
},
{
field : 'id',
title : 'ID',
visible : false
},
{
field: 'avatar',
title: '头像',
align: 'center',
formatter: function(value,row,index){
var imgUrl='files/'+row.avatar;
if(row.avatar==''||row.avatar==null){imgUrl="/images/default.jpg";}
return '<img src='+imgUrl+' class="img-rounded" style="width:50px;height:50px;" >';
}
},
{
field : 'loginName',
title : '登录名称'
},
{
field : 'userName',
title : '真实名称'
},{field : 'email',title : '邮箱'},{field : 'phoneNum',title : '电话'},{title : '操 作',field : 'id',align : 'center',formatter : function(value, row, index) {var id = row.id;var e;e = '<a href ="#" title="编辑"><span class="fa fa-wrench" onclick="editUser(\''+ id+ '\')"> </span></a> '+ '<a href ="#" title="注销"><span class="fa fa-lock" aria-hidden="true" onclick="disableUser(\''+ id+ '\')"> </span></a> '+ '<a href ="#" title="删除"><span class="fa fa-times" onclick="deleteUser(\''+ id+ '\')"> </span></a> '+ '<a href ="#" title="修改密码"><span class="fa fa-key" onclick="modifyPassword(\''+ id+ '\')"> </span></a> '+ '<a href ="#" alt="" title="上传头像"><span class="fa fa-user" onclick="uploadAvatar(\''+ id+'\')"> </span></a>';return e;},events : 'operateEvents'} ]});//为翻页保留checkbox选中准备$('#userListTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){var datas = $.isArray(rows) ? rows : [rows]; // 点击时获取选中的行或取消选中的行examine(e.type,datas); // 保存到全局 Array() 里});//访问成功回调函数function responseHandler(res) {//console.log(res);if (res) {return {"rows" : res.list,"total" : res.total};} else {return {"rows" : [],"total" : 0};}
};
转载于:https://blog.51cto.com/360douruanliang/2107778
SpingBoot-Thymeleaf-bootstrapTable-分页之H5相关推荐
- spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能
文章目录 前言 正文 业务场景 后端 pom.xml application.yml 实体类video.java和User.java----映射VideoMapper.xml----VideoMapp ...
- BootstrapTable分页(一)
bootstrapTable分页 <!DOCTYPE html> <html><head><meta charset="utf-8" /& ...
- SpringBoot+Mybatis-Plus+Thymeleaf+Bootstrap分页查询(前后端完整版开源学习)图书管理系统
目录 分页主要逻辑,在3.7和3.8 1.准备工作 1.1 参考博客 1.2 项目结构 2. 数据库 3. 详细代码部分 3.1 pom依赖 3.2 application.yml 3.3 BookM ...
- php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
- 【thymeleaf】分页代码
前言 thymeleaf 3.0.9.RELEASE thymeleaf 模板方式调用 css需要替换 效果 调用分页模板 <div class="pager th:replace=& ...
- bootstraptable 分页循环_关于bootstrap-table服务端分页问题
昨天项目中涉及到了前端表格分页问题.数据一共有1万多条,所以选择了后端分页. 之前用的都是前端分页,第一次使用后端分页.网上也找到了一些例子,最后做出来了. 这里用的是bootstrap-table插 ...
- BootstrapTable分页(二)
看完上篇博客相信看完你对bootstrapTable的使用也有了进一步的认识,我们来看看bootstrapTable是怎么分页的 先看页面 代码: <!DOCTYPE html> < ...
- BootStrap-Table分页参数传不到后台,后台接收分页参数为null
最近自己整合了个springBoot小项目,使用bootstrap作为后端ui框架,但是在使用bootstrap-table时出现分页参数失效的问题,前台显示参数正常传递,但是后台接收值一直为null ...
- 处理bootstrap-table分页复选框选中获取表单数据
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
- JavaWEB九:thymeleaf 之 分页显示和关键字查询
Thymeleaf二:增删改查扩展 一.分页显示 在全查询的基础上,增加了一个参数. 重点是控制首页.上一页.下一页.尾页的可点击情况 DAO的实现类 public class ListIpm ext ...
最新文章
- 应用程序框架实战二十一:DDD分层架构之仓储(介绍篇)
- PIC单片机精通_串口通信模块C实现
- 如何改变cmd的编码格式?
- [CF 526 F] Pudding Monsters(单调栈 + 线段树)
- 27.用zxing生成二维码
- 作者:滕飞(1984-),女,博士,西南交通大学信息科学与技术学院讲师,CCF和ACM会员。...
- (软件工程复习核心重点)第七章软件维护-第三节:软件可维护性
- Python学习入门3:编程零基础应当如何开始学习Python?
- ArcGIS 9.3/9.3.1 客户端 API 更新信息--2009年5月
- 2017.4.23loli测试
- wscript运行js文件
- PHP中各种Hash算法性能比较
- 利用cookie 解决多站点共享session的解决方案
- (转帖)無號數及有號數的乘加運算電路設計(Verilog)
- python仿360界面_高仿360界面的实现(用纯XML和脚本实现)
- 江苏省发布我国首个公路行业BIM省地方标准
- 怎样用计算机做ppt,电脑怎么做ppt(教你几个小技巧做出高大上的ppt)
- 【预测模型】预测某地区未来 20 年的人口结构变化趋势(灰色预测模型)
- 波士顿大学计算机科学的就业,波士顿大学计算机科学本科申请(附案例)
- React-native 开启DEBUG模式后应用闪退
热门文章
- EelemntUI中e-form表单校验的使用以及表单校验的规则
- java类的完整生命周期详解
- 写号是什么意思_内涵段子暗号馒头是什么意思 该怎么接回答对话大全
- 口的内存映射 stm32f7_STM32F7高速缓存
- 中立安全·赋能产业,神策数据受邀出席 UCloud 用户大会
- 神策数据荣获“2017金融科技·大数据优秀案例之最佳实践案例奖”
- 11.1 安装配置Apache
- JavaScript 闭包详解
- SCUT个人整理的常见问题
- (原创)惠州市惠阳区房价偏低的原因深入分析