Bootstrap Table 是一个基于Bootstrap框架的开源JavaScript插件，它为HTML表格提供了丰富的功能，使得在网页上展示数据变得更加灵活和互动。这个"bootstrap-table-demo"压缩包文件包含了演示如何使用这个组件的示例代码和资源，帮助开发者快速理解和应用Bootstrap Table。 1. **基本用法**：Bootstrap Table 的使用通常涉及在HTML中定义一个表格结构，然后通过添加特定的类名（如"data-table"）来启用插件。表格中的每一列可以通过"data-field"属性关联数据源的字段。 2. **分页**：Bootstrap Table 提供了内置的分页功能，允许用户通过导航按钮或输入框切换页面，从而改善大量数据的浏览体验。分页设置可以通过`pagination`选项进行配置，如每页显示的条目数、是否显示页码等。 3. **全文检索**：用户可以通过在搜索框中输入关键词，实现对表格内容的全局搜索。Bootstrap Table 使用`search`选项开启这一功能，并可以定制搜索的实时性（实时搜索或提交后搜索）。 4. **数据排序**：表格的列头可被点击，以便按该列的数据进行升序或降序排序。排序功能通过`sortable`属性激活，可以针对特定列进行设定。 5. **导出功能**：Bootstrap Table 支持将表格数据导出为CSV、Excel、PDF等多种格式，方便数据的存储和共享。导出功能通过`exportOptions`进行配置，可以指定导出的列、格式等。 6. **自定义列**：开发者可以通过定义`columns`选项来自定义表格列，包括列标题、数据字段、宽度等。还可以使用`formatter`函数来格式化单元格内容。 7. **扩展功能**：Bootstrap Table 还提供了许多其他扩展功能，如行选择、行编辑、列隐藏、固定列、合并单元格等。这些功能可以通过额外的插件或设置来启用。 8. **API与事件**：Bootstrap Table 提供了一系列的API方法（如`refresh`, `load`, `toggleColumn`等）用于在运行时操作表格，以及一系列的事件（如`load-success`, `column-switch`等）供开发者监听和响应。 9. **响应式设计**：为了适应不同设备的屏幕尺寸，Bootstrap Table 支持响应式布局，使得在手机和平板等小屏幕上也能有良好的显示效果。 10. **国际化**：Bootstrap Table 支持多语言，通过`language`选项可以轻松切换语言环境，满足全球化需求。 通过"bootstrap-table-demo"中的示例代码，开发者可以学习到如何集成和配置这些功能，实现一个功能完善的交互式表格。这个压缩包中的文件可能包括HTML模板、CSS样式、JavaScript脚本以及示例数据，帮助开发者快速上手。在实际项目中，可以根据具体需求调整和扩展这些示例，打造符合业务场景的表格组件。

Bootstrap表格和Bootstrap-Switch是两个在前端开发中常用的库，它们极大地丰富了网页的交互性和美观性。Bootstrap表格主要用于展示和操作数据，而Bootstrap-Switch则是一个轻量级的插件，用于创建开关按钮，常见于对某个选项的开启或关闭状态进行控制。 Bootstrap表格（bootstrap-table）是一个基于Bootstrap框架的插件，它提供了许多增强表格功能的方法，如排序、分页、搜索、列选择等。通过简单的HTML和JavaScript，开发者可以快速地创建出功能丰富的表格。例如，你可以通过设置特定的属性来实现表格的自定义，比如`data-toggle="table"`用来启用表格功能，`data-url`指定数据来源，`data-search`开启搜索功能等。此外，还可以通过JavaScript方法来控制表格的行为，如`table.init()`初始化表格，`table.load(data)`加载数据等。 Bootstrap-Switch插件则是一个模拟物理开关的组件，通常用于代替传统的复选框或单选按钮。它提供了一种直观且易于操作的界面，用户只需轻轻一滑，就能改变开关的状态。这个插件的核心在于`bootstrap-switch.js`和对应的样式文件`bootstrap-switch.min.css`。在使用时，你需要先在HTML中添加``，然后通过JavaScript的`.bootstrapSwitch()`方法将其转化为开关样式，如`$('input[type="checkbox"]').bootstrapSwitch();`。同时，该插件还支持各种配置选项，如`data-on-text`定义开状态的文字，`data-off-color`设置关状态的颜色等。 在实际应用中，这两者可以结合使用，例如，在一个Bootstrap表格中，某列的数据表示某个功能的开关状态，这时可以使用Bootstrap-Switch插件来创建交互式的开关按钮。通过表格的行点击事件，获取当前行的数据，更新开关状态，并通过Ajax异步更新后台数据，从而实现数据的实时同步。 为了更好地利用这两个插件，你需要熟悉jQuery和基本的前端开发知识，包括HTML结构、CSS样式和JavaScript事件处理。同时，理解Bootstrap的基本布局和组件原理也是必不可少的。在实际项目中，还要考虑性能优化，比如分页加载大量数据以减少内存占用，以及适配不同屏幕大小以确保响应式设计。 在具体实现过程中，可以参考提供的链接（https://blog.csdn.net/weixin_43929904/article/details/124149121?spm=1001.2014.3001.5502），这个链接可能包含详细的示例代码和使用教程，帮助你更深入地理解和运用这两个工具。在学习和使用过程中，遇到问题可以查阅官方文档或在线社区，如Stack Overflow，那里有丰富的资源和解决方案。

通过对bootstrap-table.min.js的修改，实现了自定义搜索功能。 function search() { var keyvalue = $("#searchStr").val(); $("#tablelist").bootstrapTable("loadAddSearch", keyvalue); }

columns的formatter方法中可使用this.options获取全局配置信息，主要用户分页序号的设置功能。

bootstrap-table冻结列例子

bootstrap-table-edit.js插件，使用bootstrap编辑行内单元格必用的方便、快捷的js插件

bootstrap-table 表格组件神器：bootstrap table详细使用指南

bootstrap制作分页查询时需要的bootstrap-table.js和bootstrap-table.css文件

bootstrap-table插件：bootstrap-editable,可编辑下拉框，以及代码实例,

2375行加上this.$header.outerHeight() 判断