BootstrapTable如何重新加载数据?3种方式了解一下!
3776
本篇文章给大家介绍一下bootstrapTable刷新(重新加载数据)的3种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
项目中使用到了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页 ,页面不会滚动,体验会更好 。但是当查询列表数据为空时,方法失效。
本文网址:https://www.zztuku.com/index.php/detail-8865.html
站长图库 - BootstrapTable如何重新加载数据?3种方式了解一下!
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!