Boostrap-Table插件
admin
2024-03-05 00:45:49
0

Boostrap-Table插件能使我们的分页查询数据不必重定向页面,因为重定向需要重新加载整个页面的资源对于一些复杂的页面响应时间是很长的,我们如果只关注表格中的数据改动

如果项目中是使用Bootstrap Table来做数据展示的,所以我们要了解数据如何展示,我们需要先来了解Bootstrap Table是如何使用的.
Bootstrap Table参考文档

列表展示

添加Bootstrap Table相关的CSS和JS文件






把thymeleaf循环生成表格的代码删除,添加如下html代码

添加js代码把table标签渲染成组件,默认分页给后台传递的是offset(需要查询从这个起始索引开始)和limit这两个参数

$('#table').bootstrapTable({url: '/permission/listData',//请求路径method: 'GET',   //数据请求方式sidePagination:'server',//服务端分页pagination:true,//开启分页uniqueId:"id",columns: [{//表格中有哪些列field: 'id',title: '编号'}, {field: 'name',title: '权限名称'}, {field: 'expression',title: '权限表达式'}}]});

后台需要提供一个方法接受上面请求的2个参数并查询返回组件所需要的数据,对返回的数据格式有要求,json数据,需要如下格式

{"total":8,"rows":[{"id":1,"name":"xx权限","expression":"xx权限表达式"},{"id":2,"name":"xx权限","expression":"xx权限表达式"},{"id":3,"name":"xx权限","expression":"xx权限表达式"}]}

所以我们需要提供一个类,把数据封装成如下格式

@Setter
@Getter
@NoArgsConstructor
@AllArgsConstructor
public class TableDataInfo {/** 总记录数 */private long total;/** 列表数据 */private List rows;
}

后台控制器方法需要返回JSON格式数据

@RequestMapping("/list")
public String list() {return "permission/list";
}@RequestMapping("/listData")
@ResponseBody
public TableDataInfo listData(QueryObject qo)
{PageHelper.offsetPage(qo.getOffset(),qo.getLimit());//设置分页起始索引,查询多少条数据PageInfo pageInfo = permissionService.query(qo);//查询出分页数据return new TableDataInfo(pageInfo.getTotal(),pageInfo.getList());//封装数据并返回
}

高级查询

在页面中增加输入框和查询按钮

关键字:
 查询

增加搜索的点击事件处理

function searchOp(){//点击查询时,刷新表格数据$('#table').bootstrapTable('refresh');
}

在上面bootstrapTable()方法中添加查询参数这个属性

queryParams:function(params) {//找到name为key的标签将值给它,它将会在请求时带上这个参数params.key=$("[name=key]").val();return params;
},

相关内容

热门资讯

怎么解除订阅安卓系统,安卓系统... 你是不是也和我一样,手机里订阅了好多服务,结果现在想解除订阅,却一头雾水?别急,今天就来手把手教你如...
安卓系统停用怎么开启,轻松恢复... 亲爱的手机控们,你是否曾经遇到过安卓系统突然停用的情况,让你手忙脚乱,不知所措?别担心,今天就来教你...
安卓系统电池健康度,电池健康度... 你有没有发现,你的安卓手机最近是不是有点儿不给力了?电池续航能力大不如前,充电速度也慢了不少?别急,...
安卓系统按键怎么截图,安卓系统... 你是不是也和我一样,有时候想截个图分享给朋友,却发现安卓手机的截图功能有点神秘呢?别急,今天就来手把...
购票系统安卓源代码,架构设计与... 你有没有想过,那些我们每天离不开的购票系统,它们背后的秘密是什么呢?今天,就让我带你一探究竟,揭开购...
安卓手机系统后台测试,深度解析... 你有没有发现,你的安卓手机后台总是悄悄地忙碌着?别小看了这些后台程序,它们可是手机系统稳定运行的关键...
安卓系统重启的图标,解锁设备新... 手机突然重启,是不是心里有点慌?别急,今天就来和你聊聊安卓系统重启的图标,让你一眼就能认出它,再也不...
车载智慧屏安卓系统,智能出行新... 你有没有发现,现在的车载智慧屏越来越智能了?尤其是那些搭载了安卓系统的,简直就像是个移动的小电脑,不...
安卓系统连上网权限,解锁设备无... 你有没有发现,你的安卓手机里有些应用总是偷偷连上网?别小看这个小小的网络权限,它可是能影响你隐私、消...
安卓谷歌操作系统,探索安卓谷歌... 你知道吗?在智能手机的世界里,有一个操作系统可是无人不知、无人不晓,那就是安卓谷歌操作系统。它就像一...
安卓系统手写%怎样调出,具体实... 你有没有遇到过这种情况:在使用安卓手机的时候,突然想用手写输入法来记录一些灵感或者重要信息,可是怎么...
安卓手机重置 系统设置,轻松恢... 手机用久了是不是感觉卡顿得厉害?别急,今天就来教你怎么给安卓手机来个大变身——重置系统设置!想象你的...
win如何安装安卓系统,Win... 哇,你有没有想过,让你的Win系统也能玩转安卓应用?没错,就是那种在手机上轻松自如的安卓系统,现在也...
苹果qq和安卓系统,跨平台体验... 你有没有发现,现在手机市场上,苹果和安卓的较量可是越来越激烈了呢!咱们就来聊聊这个话题,看看苹果QQ...
显示最好的安卓系统,探索最新旗... 你有没有想过,为什么安卓系统那么受欢迎呢?它就像一个魔法盒子,里面装满了各种神奇的魔法。今天,就让我...
安卓app怎么降级系统,系统版... 你有没有发现,有时候安卓手机的系统更新后,新功能虽然炫酷,但老系统用起来更顺手呢?别急,今天就来教你...
雷军脱离安卓系统,引领科技变革... 你知道吗?最近科技圈可是炸开了锅,因为我们的雷军大大竟然宣布要脱离安卓系统,这可真是让人大跌眼镜啊!...
安卓系统自动开网络,安卓系统自... 你有没有发现,手机里的安卓系统有时候会自动开启网络连接,这可真是让人又爱又恨啊!有时候,你正专心致志...
安卓系统怎样控制后台,因为服务... 手机里的安卓系统是不是感觉越来越卡了?后台程序太多,不仅耗电还影响性能。别急,今天就来教你怎么巧妙地...
安卓系统打游戏推荐,一触即达! 你有没有发现,现在手机游戏越来越好玩了?不管是休闲小游戏还是大型MMORPG,都能在手机上畅玩。但是...