Bootstrap Table 实战：筛选、服务端分页与虚拟滚动的高频配置

【免费下载链接】bootstrap-tableAn extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table

Bootstrap Table 是一个基于 jQuery 的前端表格组件：给后台加一张可筛选、可分页的订单表，表头按列过滤和按页拉后端数据，一份配置对象就够了。文章按落地动线拆四个高频配置。

30秒定位

读完这节能向同事讲清楚这个组件的架构方式和加功能的成本。

核心是一个 BootstrapTable 类，init 时按固定顺序走完本地化、容器、表头、工具栏、分页、表体这几步。每个功能都是 src/extensions/ 目录下独立的 JS 文件，需要时才引入，比如筛选、导出、树形行。所以加一个功能的基本成本是“多引一个文件 + 开一个参数”，这也是它和纯 CSS 框架组件的分界线：集成前提是 jQuery 加一个 CSS 框架（Bootstrap、Bulma、Foundation 等）。

把数据玩出花样

表格最高频的两个诉求是“筛出想要的”和“翻页看想要的”，这节给两套改一行就能跑的最小配置。

列级筛选：给表头每列挂一个控件

内置的search: true只有一行全局搜索，要精确到列就得用 filter-control 扩展 src/extensions/filter-control/bootstrap-table-filter-control.js。规则很简单：表上开filterControl，列上声明控件类型。select 列可以用data-filter-data喂选项，支持本地变量、对象、远端 JSON、JSON 字符串和函数五种来源。

下面这段解决“状态用下拉、名称用文本框、时间用日期”的三列筛选：

<table>$('#table').bootstrapTable({ sidePagination: 'server', pagination: true, pageSize: 20, url: '/api/orders' })

表内搜索、多列排序（multiple-sort 扩展）、展开详情行、列显隐开关，都还能再各开一个布尔参数，参数清单在项目的 table-options 文档里。

让表格长得像你的产品

读完这节能把表格从默认皮肤切到七个内置框架皮肤之一，也能用几行 SCSS 改掉任意一处颜色。

主题切换不动核心代码：src/themes/ 下每个子目录是一套皮肤，各配一份 JS 和 SCSS，引入对应主题文件即可覆盖默认的主题常量和工具栏行为。默认皮肤与 Bootstrap 4 皮肤的效果对比：

更深的定制路径也短：主样式集中在 src/bootstrap-table.scss，最终落到 src/themes/_theme.scss，边框色、加载背景色都暴露成了 CSS 变量，直接在自己的 SCSS 里重新赋值即可，不用 fork 源码。

这段解决“表格边框和表头视觉与产品不一致”：

html { --bt-table-border-color: #d0d7de; } .bootstrap-table .fixed-table-container .table thead .th-inner { font-weight: 600; }

从能用到好用

演示表格和能上线的表格之间，通常隔着三件事：万行数据卡不卡、能不能一键导出、踩坑了多快能解决。

开启虚拟滚动渲染大数据

虚拟滚动的实现在 src/virtual-scroll/index.js：只渲染可视区域内的行，上下用等高的占位行撑住滚动条位置。它假设行高一致，行高不定时要么给td加white-space: nowrap;，要么显式传入行高。

这段解决“一万行数据滚动掉帧”：

$('#table').bootstrapTable({ virtualScroll: true, virtualScrollItemHeight: 38, height: 500 })

现成扩展：export 与 cookie

• export：引入文件后开showExport: true，工具栏多一个导出下拉；exportTypes选格式（csv、excel、json 等），exportDataType选当前页、全部还是选中行。
• cookie：引入后分页、排序、搜索状态自动写入 cookie，下次打开表格还原成用户上次离开的样子，不用写任何代码。

📌 高频问题速查

• 设置height后，窗口缩放导致表头错位 → 监听 window 的 resize 事件调用resetView()。
• 合并单元格翻页或刷新后被拆开 → 在 load-success、page-change、column-switch 事件里重跑mergeCells。
• jQuery 里on('click-row.bs.table')回调参数看着错位 → 第一个参数是 event，不是 row，别按文档顺序硬改。
• 虚拟滚动行错位 → 保证行高一致，或显式给virtualScrollItemHeight。

更多问题可直接翻 site/src/pages/docs/faq/faq.mdx。

最快的起步方式：把服务端分页和列级筛选两段配置抄进项目，先用真实数据跑通，再对照 _theme.scss 的变量表把边框、表头背景、行悬停三处颜色改成你自己的设计语言。

【免费下载链接】bootstrap-tableAn extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table