带有 twitter bootstrap 的 javascript 数据表

Posted 2023-05-07

【中文标题】带有 twitter bootstrap 的 javascript 数据表

【英文标题】：javascript data tables with twitter bootstrap

【发布时间】：2012-01-13 17:19:19

【问题描述】：

我正在尝试将 DataTables.js (http://datatables.net) 与使用 twitter 引导库的应用程序集成。似乎 DataTable 不适用于 twitter 引导程序。我不确定是css还是js有冲突。

如何将 DataTables.js 与 Twitter Bootstrap 集成？是否还有其他与 Twitter Bootstrap 配合得很好的数据表库？

【问题讨论】：

您能给我们展示一些代码并详细说明“无法正常工作”的部分吗？

【参考方案1】：

实际上很容易集成 Bootstrap 和 DataTables，这样您的功能齐全的 DataTables 将与您网站的其他部分保持相同的外观和感觉。 这是链接：http://datatables.net/blog/Twitter_Bootstrap 对于 Bootstrap v2.x.x：http://datatables.net/blog/Twitter_Bootstrap_2

【讨论】：

或者对于刚刚发布的 bootstrap 2.0：datatables.net/blog/Twitter_Bootstrap_2

哦，但是时间在流逝。现在版本 3 怎么样？

【参考方案2】：

对于 Bootstrap 3，请使用 plugin。

DataTables Plugins

此存储库包含插件集合 用于 jQuery DataTables 表增强器。这些插件是功能 增强 DataTables 库，为核心添加额外的选项 功能，例如附加的排序算法、API 方法和 分页控件。插件不应与 DataTables “附加”，它们是更重要的软件库 它为 DataTables 添加了额外的功能。

【讨论】：

和here's the official documentation on how to use those plugin files

【参考方案3】：

解决方案

使用Download Builder 生成指向 JS/CSS 文件的链接，并包含 Bootstrap 样式和 Twitter Bootstrap 库（如果需要）。

将生成的 JS/CSS 链接包含到您的项目中。

为您的<table> 使用类table table-striped table-bordered，如下所示：

<table id="example" class="table table-striped table-bordered" cellspacing="0" >

演示

有关代码和演示，请参阅 this jsFiddle。