如何为Bootstrap Table添加搜索框与分页功能及官方文档查询

嘿，既然你的Bootstrap Table已经正常渲染了，那添加搜索和分页其实超简单——这个组件本身就内置了这些常用功能，完全不用自己从零写逻辑！我给你一步步拆解：

一、添加顶部搜索框 #

有两种常用方式，你可以根据自己的代码风格选择：

• HTML属性快速开启
  直接在你的table标签里加上data-search="true"，Bootstrap Table会自动在表格顶部生成一个搜索框，并且自动处理搜索逻辑（默认匹配所有列的内容）：

<table id="yourTableId" data-search="true" ...其他已有的属性>
  <!-- 表格内容 -->
</table>

• JavaScript配置开启
  如果是通过JS初始化表格，就在配置对象里加上search: true，还能自定义搜索框的占位符：

$('#yourTableId').bootstrapTable({
  // 你的其他配置项
  search: true,
  searchPlaceholder: '输入关键词搜索表格内容...'
});

要是你想把搜索框放到表格外的自定义容器里（比如页面顶部的工具栏），可以先关闭内置搜索，再自己写输入框并绑定搜索方法：

<div class="table-header">
  <input type="text" id="customSearchInput" placeholder="自定义搜索...">
</div>
<table id="yourTableId" data-search="false" ...>...</table>

$('#customSearchInput').on('input', function() {
  $('#yourTableId').bootstrapTable('search', $(this).val());
});

二、添加底部分页功能 #

分页也是Bootstrap Table的内置功能，同样有两种开启方式：

• HTML属性方式
  给table标签添加data-pagination="true"，还能配置默认每页条数、可选的分页条数列表：

<table id="yourTableId" data-pagination="true" 
       data-page-size="10" 
       data-page-list="[5, 10, 20, 'All']"
       ...其他属性>
  <!-- 表格内容 -->
</table>

• JavaScript配置方式
  在初始化配置里添加分页相关参数，还能自定义分页按钮的文本：

$('#yourTableId').bootstrapTable({
  // 其他配置项
  pagination: true,
  pageSize: 10, // 默认每页显示10条
  pageList: [5, 10, 20, 'All'], // 可选的每页条数选项
  paginationPreText: '上一页', // 自定义上一页按钮文本
  paginationNextText: '下一页' // 自定义下一页按钮文本
});

三、官方文档指引 #

Bootstrap Table的官方文档内容非常全面，涵盖了所有配置项、API方法和实战示例。你可以直接搜索“Bootstrap Table Documentation”找到官方站点，里面有关于搜索、分页、工具栏自定义等所有功能的详细说明，还有现成的代码示例可以直接参考。

内容的提问来源于stack exchange，提问作者codec