bootstrapTable 刷新（重新加载数据）的几种方式

Love The Way You Lie 2022-10-27 12:28 500阅读 0赞

项目中使用到了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() { 
    	//var pageNumber = $("#dataTable").bootstrapTable("getOptions").pageNumber; // 获取当前页码
    	$("#dataTable").bootstrapTable('refreshOptions',{ pageNumber:1});  // pageNumber:1, 指定页码
    }
    
    // 方法3： 跳转到第n页
    function reLoad3() { 
    	$("#dataTable").bootstrapTable('selectPage', n);
    }

**说明：**  
方法1、方法2 是将 table销毁销毁，再生成新的列表；由于 table销毁，使得每次页面会滚动最上面。

方法3 是跳转到第n页 。但是当查询列表数据为空时，方法失效。