JS表格组件神器bootstrap table详解（基础版）

一、如何引入Bootstrap Table？

引入Bootstrap Table有两种主要方法。

你可以直接下载源码，将其添加到你的项目中。由于Bootstrap Table是Bootstrap的一个组件，所以它依赖于Bootstrap，因此你需要同时添加Bootstrap的引用。

你也可以通过神奇的Nuget来安装。打开Nuget，搜索相关的包，你会发现Bootstrap已经更新到了的3.3.5版本，你可以直接安装。但是对于Bootstrap Table，Nuget上的版本可能较旧，因此建议直接从源码下载的版本，目前应该是1.9.0版本。

二、如何使用Bootstrap Table？

接下来，我们有一个`ButtonInit`对象的初始化。虽然这段代码目前只是声明了一个对象和方法，但你可以在此基础上添加按钮的初始化逻辑，比如绑定点击事件等。

通过`queryParams`方法获取查询参数，这些参数将在向服务器发送请求时使用。

分页技术与Bootstrap样式遇到的挑战

在MVC框架中，columns参数承载了列的排序、对齐、宽度等多种设置。对于初学者而言，这些功能似乎充满神秘，但实则通过API就能轻松掌握。

接下来，让我们聚焦于Controller中的一段关键代码。这段代码定义了一个名为GetDepartment的方法，用于获取部门信息。方法接收一系列参数，包括限制（limit）、偏移量（offset）、部门名称（departmentname）和状态（statu）。在这个方法中，我们模拟生成了一个包含50个部门的列表。当服务端需要分页时，返回的结果必须包含两个关键参数：total和rows。这两个参数分别表示总记录数和当前页的记录。它们的正确命名至关重要，否则前端将无法正确并展示数据。起初，可能会因疏忽写错参数名，如将row误写为rows，导致数据无法正确显示。这样的问题，需要我们细心检查并修正。

除了参数设置，我们还会遇到与bootstrap页面样式相关的问题。bootstrap通过class来定义图标，如"glyphicon glyphicon-plus"。但在实际操作中，可能会发现某些图标无法正常显示。这通常是因为fonts文件夹的问题。在MVC项目中，fonts文件夹通常会自动创建并放置在特定的位置。如果我们的bootstrap.css文件被放置在Content文件夹下，可能会导致样式文件无法被正确找到。解决这个问题的方法很简单：只需将fonts文件夹移动到Content文件夹下即可。

我们还会面临关于中文显示的问题。在某些情况下，可能需要处理中文编码问题，以确保数据在前端正确显示。这些问题都需要我们逐一解决，以确保项目的顺利进行。

在项目的初始阶段，我们遇到了一个界面显示的问题。由于未引入特定的包，界面中的记录显示全部为英文。具体来说，缺少引用~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js这个中文包，导致界面元素未能成功本地化。

面对这一问题，我们进行了深入研究和资料查询。令人欣喜的是，在bootstrap table中居然藏有一个专为中文设计的包。通过简单地将其引入项目中，我们就成功解决了界面本地化的问题，使得所有的内容都展示成了中文，极大地提升了用户体验。

这个问题困扰了我们一段时间。原因是服务端的分页机制导致只有当前页面的数据在前端可见，而搜索功能默认是在前端对所有数据进行匹配和筛选。当我们尝试搜索时，只能找到当前页面的数据，而无法对全量数据进行搜索。为了解决这个问题，我们需要重新思考搜索逻辑的实现方式。或许可以考虑在服务端实现搜索功能，或者在获取新数据时进行本地搜索的缓存处理。这将是我们后续工作中的一个重点研究方向。

当博主在谷歌环境中调试bootstrap-table.js时，发现了关于搜索功能的独特逻辑。这个JavaScript库中的BootstrapTable对象定义了一个名为onSearch的方法，专门处理搜索事件。当用户在搜索框中输入内容时，该方法会被触发。

该方法会获取用户输入的文本并进行处理，例如去除首尾空格等。然后，如果当前选项中的sidePagination不是服务器端分页（即'server'），那么就会进入初始化搜索过程。这是因为服务端分页时，数据的过滤和处理通常由服务器完成，所以不需要在客户端进行搜索操作。而当采用客户端分页时，搜索功能就会生效。

```javascript

oTableInit.queryParams = function (params) {

var temp = {}; //这里的键名需与后端接收变量名保持一致，若此处有改动，后端相应接收变量也需更改

temp.limit = params.limit; //页面大小

temp.offset = params.offset; //页码

temp.order = params.order; //排序方式

temp.ordername = params.sort; //排序字段

temp.departmentname = $("txt_search_departmentname").val(); //部门名称搜索值

temp.statu = $("txt_search_statu").val(); //状态搜索值

return temp;

};

```

关于Bootstrap Table的使用体验，我们有如下几点分享：

其界面采用扁平化设计，这种风格在现代web应用中非常流行，用户体验较好，并且兼容各种客户端设备，这一点尤为重要。

Bootstrap Table是开源且免费的，这对于许多开发者来说是一个巨大的吸引力。

如果你对Bootstrap Table有浓厚的兴趣并希望深入学习，我们推荐你点击相关链接进行深入。近期我们还为大家准备了一系列精彩的专题，欢迎大家学习。