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相关推荐

  1. spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能

    文章目录 前言 正文 业务场景 后端 pom.xml application.yml 实体类video.java和User.java----映射VideoMapper.xml----VideoMapp ...

  2. BootstrapTable分页(一)

    bootstrapTable分页 <!DOCTYPE html> <html><head><meta charset="utf-8" /& ...

  3. 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 ...

  4. php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】

    本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...

  5. 【thymeleaf】分页代码

    前言 thymeleaf 3.0.9.RELEASE thymeleaf 模板方式调用 css需要替换 效果 调用分页模板 <div class="pager th:replace=& ...

  6. bootstraptable 分页循环_关于bootstrap-table服务端分页问题

    昨天项目中涉及到了前端表格分页问题.数据一共有1万多条,所以选择了后端分页. 之前用的都是前端分页,第一次使用后端分页.网上也找到了一些例子,最后做出来了. 这里用的是bootstrap-table插 ...

  7. BootstrapTable分页(二)

    看完上篇博客相信看完你对bootstrapTable的使用也有了进一步的认识,我们来看看bootstrapTable是怎么分页的 先看页面 代码: <!DOCTYPE html> < ...

  8. BootStrap-Table分页参数传不到后台,后台接收分页参数为null

    最近自己整合了个springBoot小项目,使用bootstrap作为后端ui框架,但是在使用bootstrap-table时出现分页参数失效的问题,前台显示参数正常传递,但是后台接收值一直为null ...

  9. 处理bootstrap-table分页复选框选中获取表单数据

    <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...

  10. JavaWEB九:thymeleaf 之 分页显示和关键字查询

    Thymeleaf二:增删改查扩展 一.分页显示 在全查询的基础上,增加了一个参数. 重点是控制首页.上一页.下一页.尾页的可点击情况 DAO的实现类 public class ListIpm ext ...

最新文章

  1. 应用程序框架实战二十一:DDD分层架构之仓储(介绍篇)
  2. PIC单片机精通_串口通信模块C实现
  3. 如何改变cmd的编码格式?
  4. [CF 526 F] Pudding Monsters(单调栈 + 线段树)
  5. 27.用zxing生成二维码
  6. 作者:滕飞(1984-),女,博士,西南交通大学信息科学与技术学院讲师,CCF和ACM会员。...
  7. (软件工程复习核心重点)第七章软件维护-第三节:软件可维护性
  8. Python学习入门3:编程零基础应当如何开始学习Python?
  9. ArcGIS 9.3/9.3.1 客户端 API 更新信息--2009年5月
  10. 2017.4.23loli测试
  11. wscript运行js文件
  12. PHP中各种Hash算法性能比较
  13. 利用cookie 解决多站点共享session的解决方案
  14. (转帖)無號數及有號數的乘加運算電路設計(Verilog)
  15. python仿360界面_高仿360界面的实现(用纯XML和脚本实现)
  16. 江苏省发布我国首个公路行业BIM省地方标准
  17. 怎样用计算机做ppt,电脑怎么做ppt(教你几个小技巧做出高大上的ppt)
  18. 【预测模型】预测某地区未来 20 年的人口结构变化趋势(灰色预测模型)
  19. 波士顿大学计算机科学的就业,波士顿大学计算机科学本科申请(附案例)
  20. React-native 开启DEBUG模式后应用闪退

热门文章

  1. EelemntUI中e-form表单校验的使用以及表单校验的规则
  2. java类的完整生命周期详解
  3. 写号是什么意思_内涵段子暗号馒头是什么意思 该怎么接回答对话大全
  4. 口的内存映射 stm32f7_STM32F7高速缓存
  5. 中立安全·赋能产业,神策数据受邀出席 UCloud 用户大会
  6. 神策数据荣获“2017金融科技·大数据优秀案例之最佳实践案例奖”
  7. 11.1 安装配置Apache
  8. JavaScript 闭包详解
  9. SCUT个人整理的常见问题
  10. (原创)惠州市惠阳区房价偏低的原因深入分析