bootstraptable自定义搜索及重置实现方法

By | 2020年6月4日

bootstraptable版本:v1.16.0

需要实现要求:需要自定义一个搜索框,搜索服务端传来的数据。

遇到的问题:在网上搜索了很多关于bootstraptable自定义传参以及refresh传参的问题,都没用;自行测试时参数根本无法传递,不知道是我版本问题还是网上的有误。

解决方案:最后我找到了一个解决方法,很好用,我想在之后的版本中都应该可以使用。

$chooseActivityGoodsTable = $('#chooseActivityGoodsTable');  //获取table对象
//初始化table,此处有很重要的一步,获取动态获取参数值
$chooseActivityGoodsTable.bootstrapTable('destroy').bootstrapTable({
  ........   //此处省略了一些参数
  queryParams : function(params) { //上传服务器的参数
            var temp = {
                offset : params.offset,  // SQL语句起始索引
                pageNumber : params.limit,  // 每页显示数量
                warehouseId : warehouseId,
                key : $.trim($("#chooseActivityGoodsSearchKey").val()),  //获取搜索关键词的值,此处是关键,直接在此处动态获取,之后刷新都会获取参数
            };
            return temp;
        },
});
//触发搜索按钮
$(document).on("click","#chooseActivityGoodsSearch",function(){
    	var key=$.trim($("#chooseActivityGoodsSearchKey").val());
    	if(key==''){
    		layer.msg("请输入搜索内容");
			return false;
    	}
        //此处直接执行刷新方法,无需传入key值,因为上面已经设置了动态获取了
    	$chooseActivityGoodsTable.bootstrapTable('refresh');
});
//重置搜索,首先清除搜索框里的值,然后执行刷新方法
//重置搜索条件
    $(document).on("click","#reset_searchbnt",function(){
    	$("#chooseActivityGoodsSearchKey").val('');
    	$chooseActivityGoodsTable.bootstrapTable('refresh');
    });

发表评论

电子邮件地址不会被公开。 必填项已用*标注