为什么bootstraptable自定义搜索或筛选不触发

By | 2020年6月10日

最近发现很多网友在问问什么我根据bootstraptable官方的介绍,自定义了一个工具栏对数据进行搜索或筛选,但就是不生效,这是为什么呢?

其实对于bootstraptable自定义搜索或筛选不触发不生效的问题,我也遇到了,并且也去网上以及官方网站去找过答案了,很多答案都没有用,试了一遍都没用!最后通过一个网友的回答我找到了解决方案。

一开始你如果通过官方文档去自定义传参至后台的话,你会发现根本不起作用:

$table.bootstrapTable('refresh',{
  query:{
     ......  //这里是你需要传递的自定义参数
  }
});

是不是感觉这个很明朗方便?然鹅并没有用,参数根本传递不过去!

而我找到的解决方案是这样的(以下代码部分参数省略,关于如何配置bootstraptable参数请至此网址查看:https://www.dsboke.com/2020/06/10/bootstraptable_fu_wu_duan_shu_ju_xuan_ran_yi_ji_fen_ye_shi_xian/):

//此代码是bootstraptable渲染数据的配置,也就是初始化表格数据
$table.bootstrapTable('destroy').bootstrapTable({
   ............  //省略一大串参数
   queryParams : function(params) { //上传服务器的参数
            var temp = {
                offset : params.offset,  // SQL语句起始索引
                pageNumber : params.limit,  // 每页显示数量
                warehouseId : $("#warehouseId ").val(),  //自定义参数
                key : $.trim($("#chooseActivityGoodsSearchKey").val()),  //自定义参数,搜索关键词
            };
            return temp;
   },
});

以上代码中queryParams参数就是自定义参数传参的重中之重,通过上面的代码你可以看到自定义参数值是世界动态获取的,那么如何去触发参数呢?

//以下就是点击搜索按钮或者筛选按钮触发自定义参数传至服务端
$("#submit").click({
   $table.bootstrapTable('refresh');
});

你看到上面代码会疑问,为什么只有一个刷新表格的代码,没有其他参数了呢?

这个就是比较坑的地方,官方文档只是介绍了它是刷新数据的方法,却没有说在刷新数据的同时将你已经设置的参数一并传至了服务端进行请求数据。

其实还是那句话,重中之重是你在初始化数据的时候,对queryParams参数中的传参数据进行动态获取,这样在对表格进行刷新的时候,bootstraptable会自行获取对应参数的值,并传至服务器。

发表评论

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