bootstrapTable如何重新加载数据?3种方式了解一下!

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

bootstrapTable如何重新加载数据?3种方式了解一下!

本篇文章给大家介绍一下bootstrapTable刷新(重新加载数据)的3种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

【相关推荐:《bootstrap教程》】

项目中使用到了bootstrapTable , 根据条件查询数据,重新加载列表,有几种方式。

直接看代码:

$(function() {load();});function load() {$('#dataTable').bootstrapTable({method : 'post',url : "/user/list",pageSize : 10, pageNumber : 1,sidePagination : "server", queryParams : function(params) {return {limit: params.limit,offset: params.offset,                userName: $.trim( $('#userName').val() ) ,                age: $.trim( $('#age').val() ) ,                                                                 }},columns : [{checkbox : true},            {field : 'userName', title : '名称' ,},            {field : 'age', title : '年龄' ,},                        {field : 'createDate', title : '创建时间' ,},            {title : '操作',field : 'id',formatter : function(value, row, index) {return '' ;}} ]});}// 方法1: 刷新(重新加载数据)function reLoad() {$('#dataTable').bootstrapTable('destroy');    load();}// 方法2: 刷新(重新加载数据)function reLoad2() {$("#dataTable").bootstrapTable('refreshOptions',{pageNumber:1});  // pageNumber:1, 指定页码为第1页$("#dataTable").bootstrapTable('refresh');}// 方法3(推荐): 跳转到第1页(包含查询和重新加载)function reLoad3() {$("#dataTable").bootstrapTable('selectPage', 1);}
登录后复制

说明:

方法1、方法2 是将 table销毁销毁,再生成新的列表;由于 table销毁,使得每次页面会滚动最上面。

方法3 是跳转到第1页 ,页面不会滚动,体验会更好但是当查询列表数据为空时,方法失效。

更多编程相关知识,请访问:编程教学!!

以上就是bootstrapTable如何重新加载数据?3种方式了解一下!的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:用Java设计模式中的观察者模式开发微信公众号的实例代码
下一篇:bootstrap能和vue一起用吗

发表评论

关闭广告
关闭广告