使用引导表插件，如何在首次加载时设置搜索字符串

with the Bootstrap Table plugin, how to set a search string on first load?

本文关键字：加载 设置 字符串 搜索 插件      更新时间：2023-09-26

使用引导表插件（http://bootstrap-table.wenzhixin.net.cn/documentation/）如何在首次加载表时设置搜索字符串？

仅存在用于启用搜索输入的"数据搜索"属性，但这不会使其增值。

我查找了"数据搜索文本"属性，但没有找到它。

不支持数据属性，但只能通过 JavaScript

bootstrapTable({
    formatSearch: function () {
        return 'search string';
    }
});

一个更好的解决方案是这个：

var srch_str = 'your search string';
var bstable_first_load = true;
table.on('post-body.bs.table', function () {//when the table is loaded the first time and visible in the DOM, set the search string...
    if(srch_str.length > 0 && bstable_first_load){$('.fixed-table-toolbar').find('.search > :input').val(srch_str);bstable_first_load = false};
});

我也需要这样的行为。我的第一次尝试是使用具有固定超时的bootstrapTable('resetSearch', 'my-query');可悲的是，这会产生两个请求（如果第一个查询到达客户端，则会产生额外的重排），因此它是次优的。

一段时间后，我发现可以明智地修改查询参数来实现目标（即仅适用于第一个请求）：

var start_query = '20';
$('#table').bootstrapTable({
     queryParams: function(params){
        if(start_query){
            $('.bootstrap-table').find('.search input').val(start_query)
            params['search'] = start_query
            start_query = null
        }
        return params
    }
});

有趣的是，$input.val()调用不会触发任何其他回调，因此上面的代码仅使用一个查询/请求。

请在此处查看工作演示：http://jsfiddle.net/e3nk137y/15364/

编辑：实现这种行为的首选方法可能应该使用searchText选项;可悲的是，它还发出了两个请求。我在引导表存储库中创建了一个问题。

编辑 2：针对 searchText 的双请求行为的补丁已合并到 Bootstrap Table 插件的开发分支中，应该成为下一个版本的一部分。

此脚本允许您在第一次加载时筛选表中的数据

<script>
 $('document').ready(function(){
   const table = $('#tableId').DataTable();
   table.search('what_you_looking_for').draw();
 });
</script>
相关文章：