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页 ,页面不会滚动,体验会更好 。但是当查询列表数据为空时,方法失效。
更多编程相关知识,请访问:编程教学!!
【文章原创作者:盐城网页开发 http://www.1234xp.com/yancheng.html 网络转载请说明出处】