Bootstrap-Table学习笔记

前言

依赖

示例

客户端分页

客户端分页需要服务器端返回的数据格式是一个**数组**

// 初始化表格
var columns = [{field: 'selectItem', radio: true},{title: '反馈时间', field: 'createTime', visible: true, align: 'center', valign: 'middle'},{title: '用户ID', field: 'createUser.id', visible: true, align: 'center', valign: 'middle'},{title: '用户名称', field: 'createUser.realName', visible: true, align: 'center', valign: 'middle'},{title: '用户反馈图片1', field: 'feedbackImgOne', visible: false, align: 'center', valign: 'middle'},{title: '用户反馈图片2', field: 'feedbackImgTwo', visible: false, align: 'center', valign: 'middle'},{title: '用户反馈图片3', field: 'feedbackImgThree', visible: false, align: 'center', valign: 'middle'},{title: '用户反馈时间', field: 'createTime', visible: true, align: 'center', valign: 'middle'},{title: '处理内容', field: 'dealWithContent', visible: true, align: 'center', valign: 'middle'},{title: '状态', field: 'hasDealWith', visible: true, align: 'center', valign: 'middle',formatter:function (value, row, index) {if(value==0) return "未处理";else return "已处理";}},{title: '操作',field:'ID', visible: true, align: 'center', valign: 'middle',formatter: function () {return '<button  type="button" onClick="#"  class="btn btn-xs btn-primary" data-toggle="modal" data-target="#consumeModal">处理</button>';}}
];//先销毁表格
$('#tableId').bootstrapTable('destroy');
//初始化表格
$('#tableId').bootstrapTable({// 请求地址url: Feng.ctxPath + "/opinion-feedback/query-opinion-feedback",// 请求方式method: "get",// 请求内容类型contentType: "application/x-www-form-urlencoded",// 数据类型dataType: "json",// 是否显示行间隔色striped: true,// 是否启用排序sortable: true,// 排序方式sortOrder: "asc",// 是否使用缓存cache: false,// 每行的唯一标识// uniqueId: "id",// 指定工具栏toolbar: "#toolbar",// 显示刷新按钮showRefresh: false,// 切换显示样式showToggle: false,// 默认显示详细视图cardView: false,// 是否显示搜索// search: true,// 是否显示分页pagination: true,// 是否启用点击选中行clickToSelect: true,// 最少要显示的列数// minimumCountColumns: 2,// 显示隐藏列showColumns: false,// cell没有值时显示undefinedText: '-',// 分页方式：client客户端分页，server服务端分页/** 指定。注意，这两种后台传过来的json数据格式也不一样client : 正常的json array格式 [{},{},{}]server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据               量。*/sidePagination: "client",// 每页的记录行数pageSize: 1,// 初始化加载第1页，默认第1页pageNumber: 1,// 可供选择的每页的行数pageList: "[10, 20, 50, 80, 100]",paginationFirstText: "首页",paginationPreText: "上一页",paginationNextText: "下一页",paginationLastText: "末页",paginationLoop: false, // 分页条无限循环，默认为true// 按钮样式buttonsClass: 'btn',// 分页器classiconSize: 'pager',// 查询条件queryParams: function (params) {var hasDealWithVal = $('#hasDealWithId').val();var temp = {hasDealWith: hasDealWithVal,pageNo: params.offset/params.limit +1,pageSize: params.limit};// 时间var startDateVal = $('#startDateId').val();if (startDateVal){startDateVal = dateFormat(new Date(startDateVal), 'yyyy/MM/dd');temp.startDate = startDateVal}var endDateVal = $('#endDateId').val();if (endDateVal){endDateVal = dateFormat(new Date(endDateVal), 'yyyy/MM/dd');temp.endDate = endDateVal;}return temp;},// 列columns: columns,onLoadSuccess: function (res) {// 加载成功时console.log(res);}, onLoadError: function (statusCode) {return "加载失败了"}, formatLoadingMessage: function () {// 正在加载return "拼命加载中...";}, formatNoMatches: function () {// 没有匹配的结果return '无符合条件的记录';}
});

服务器端分页

服务器端分页，需要使用 responseHandler 设置 total 和 rows

responseHandler: function (res) {var temp = {// 下面这两个参数是必须有的, 名称不能变// 总的数量total : res.total,// 数据rows : res.content};return temp;},

示例

// 初始化表格
var columns = [{field: 'selectItem', radio: true},{title: '反馈时间', field: 'createTime', visible: true, align: 'center', valign: 'middle'},{title: '用户ID', field: 'createUser.id', visible: true, align: 'center', valign: 'middle'},{title: '用户名称', field: 'createUser.realName', visible: true, align: 'center', valign: 'middle'},{title: '用户反馈图片1', field: 'feedbackImgOne', visible: false, align: 'center', valign: 'middle'},{title: '用户反馈图片2', field: 'feedbackImgTwo', visible: false, align: 'center', valign: 'middle'},{title: '用户反馈图片3', field: 'feedbackImgThree', visible: false, align: 'center', valign: 'middle'},{title: '用户反馈时间', field: 'createTime', visible: true, align: 'center', valign: 'middle'},{title: '处理内容', field: 'dealWithContent', visible: true, align: 'center', valign: 'middle'},{title: '状态', field: 'hasDealWith', visible: true, align: 'center', valign: 'middle',formatter:function (value, row, index) {if(value==0) return "未处理";else return "已处理";}},{title: '操作',field:'ID', visible: true, align: 'center', valign: 'middle',formatter: function () {return '<button  type="button" onClick="#"  class="btn btn-xs btn-primary" data-toggle="modal" data-target="#consumeModal">处理</button>';}}
];function tableFun(queryParams){//先销毁表格$('#tableId').bootstrapTable('destroy');//初始化表格$('#tableId').bootstrapTable({//表格参数//请求地址,此处数据为本地加载url: Feng.ctxPath + "/opinion-feedback/query-opinion-feedback",//请求方式method: "get",//请求内容类型contentType: "application/x-www-form-urlencoded",//数据类型dataType: "json",//是否显示行间隔色striped: true,//是否启用排序sortable: true,//排序方式sortOrder: "asc",//是否使用缓存cache: false,//每行的唯一标识// uniqueId: "id",//指定工具栏toolbar: "#toolbar",//显示刷新按钮showRefresh: false,//切换显示样式showToggle: false,//默认显示详细视图cardView: false,//是否显示搜索// search: true,//是否显示分页pagination: true,//是否启用点击选中行clickToSelect: true,//最少要显示的列数// minimumCountColumns: 2,//显示隐藏列showColumns: false,//cell没有值时显示undefinedText: '-',//分页方式：client客户端分页，server服务端分页/*                  指定。注意，这两种后台传过来的json数据格式也不一样client : 正常的json array格式 [{},{},{}]server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。*/sidePagination: "server",//查询条件queryParams: function (params) {var hasDealWithVal = $('#hasDealWithId').val();var temp = {hasDealWith: hasDealWithVal,pageNo: params.offset/params.limit +1,pageSize: params.limit};// 时间var startDateVal = $('#startDateId').val();if (startDateVal){startDateVal = dateFormat(new Date(startDateVal), 'yyyy/MM/dd');temp.startDate = startDateVal}var endDateVal = $('#endDateId').val();if (endDateVal){endDateVal = dateFormat(new Date(endDateVal), 'yyyy/MM/dd');temp.endDate = endDateVal;}return temp;},// 请求成功后,渲染表格responseHandler: function (res) {var temp = {// 下面这两个参数是必须有的, 名称不能变// 总的数量total : res.total,// 数据rows : res.content};return temp;},//每页的记录行数pageSize: 20,//初始化加载第1页，默认第1页pageNumber: 1,//可供选择的每页的行数pageList: "[10, 20, 50, 80, 100]",paginationFirstText: "首页",paginationPreText: "上一页",paginationNextText: "下一页",paginationLastText: "末页",paginationLoop: false, // 分页条无限循环，默认为true//按钮样式buttonsClass: 'btn',//分页器classiconSize: 'pager',//查询条件queryParams: queryParams,//列参数//表头columns: columns,onLoadSuccess: function (res) {//可不写//加载成功时console.log(res);}, onLoadError: function (statusCode) {return "加载失败了"}, formatLoadingMessage: function () {//正在加载return "拼命加载中...";}, formatNoMatches: function () {//没有匹配的结果return '无符合条件的记录';}});
}
// 初始化请求数据
$(function () {var temp = {hasDealWith: 0};tableFun(temp)
});

Bootstrap-Table学习笔记相关推荐

bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
快速构建网站或移动端页面：关于Bootstrap的学习笔记
最近在设计官网,并进行一些项目的原型设计和开发,寻找了很久,想找到一个更简单.快速的方式,基于一些已有的模板或框架进行快速建设,结果发现很多时间都是徒劳,走过的路分享给大家,以防再度踩坑: 网上搜索原 ...
Bootstrap的学习笔记
1 前言今天开始学习Bootstrap啦~ 2 布局--container 2.1 container的左右两侧会有空白--px-0 container的两侧可能会出现空白,(如果设置了背景色,就会 ...
Vue Bootstrap 结合学习笔记（一）
本文是不才在学习Vue和Bootstrap过程中遇到问题解决的一些思路,主要描述了项目搭建,组件封装.获取.编辑.更新的一步步实现,一些解决方案也没找到正确的官方API,还请大拿们多多提点. 项目介绍 ...
Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单
目录: 1.组件学习大纲 2.Glyphicons字体图标 3.下拉菜单 1.组件学习大纲 2. Glyphicons字体图标 bootstrap含有接近250多个字体图标( 图标表格地 ...
Lua 函数类 Table --学习笔记
--[[ Table: 元方法: 当表达式中混合了不同元表的值时, 先看第一个值有无对应元表, 没有再看第二个对象的. 两个对象都没有,应发一个错误. 算术类的:__add加法, __mul乘法, _ ...
php bootstrap 分页查询,深入了解Bootstrap table表格插件（二）前后端分页模糊查询...
这篇文章主要为大家分享了Bootstrap table学习笔记,前后端分页模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下 ...
Bootstrap学习笔记系列1-------Bootstrap网格系统
目录 Bootstrap网格系统学习笔记简单网格偏移列嵌套列列排序 Bootstrap网格系统学习笔记简单网格先上代码再解释 <!DOCTYPE html> <htm ...
miniui文件上传 linux,MINIUI grid学习笔记
grid 控件 a.事件的绑定和移除 grid.on("rowclick", fn); //绑定事件 (这个的话类似jquery的绑定事件) grid.un("rowcl ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

Bootstrap-Table学习笔记

Bootstrap-Table学习笔记

前言

依赖

示例

客户端分页

服务器端分页

Bootstrap-Table学习笔记相关推荐

最新文章

热门文章