带有 twitter bootstrap 的 javascript 数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8394265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript data tables with twitter bootstrap
提问by ed1t
I'm trying to integrate DataTables.js (http://datatables.net) with an app which uses twitter bootstrap library. It seems like DataTable doesn't work well with twitter bootstrap. I'm not sure its the css or js thats conflicting.
我正在尝试将 DataTables.js ( http://datatables.net) 与使用 twitter bootstrap 库的应用程序集成。似乎 DataTable 不能很好地与 twitter bootstrap 配合使用。我不确定它的 css 或 js 是冲突的。
How can I integrate DataTables.js with Twitter Bootstrap? Are there any other data tables libraries that work well with Twitter Bootstrap?
如何将 DataTables.js 与 Twitter Bootstrap 集成？是否有其他数据表库可以与 Twitter Bootstrap 配合使用？
回答by Fabien Barbier
It is actually quite easy to integrate Bootstrap and DataTables such that your fully featured DataTables will match the same look and feel of the rest of your site.
Here is the link : http://datatables.net/blog/Twitter_Bootstrap
For Bootstrap v2.x.x: http://datatables.net/blog/Twitter_Bootstrap_2
集成 Bootstrap 和 DataTables 实际上很容易，这样您的全功能 DataTables 将与您网站其余部分的外观和感觉相匹配。这是链接：http ://datatables.net/blog/Twitter_Bootstrap 对于 Bootstrap v2.xx：http:
//datatables.net/blog/Twitter_Bootstrap_2
回答by GalacticJello
For Bootstrap 3, use this plugin.
对于 Bootstrap 3，使用这个插件。
This repository contains a collection of plug-ins for the jQuery DataTables table enhancer. These plug-ins are feature enhancing for the DataTables library, adding extra options to core functionality such as additional sort algorithms, API methods and pagination controls. The plug-ins should not be confused with DataTables "extras" which are more significant software libraries which add additional features to DataTables.
此存储库包含 jQuery DataTables 表增强器的插件集合。这些插件增强了 DataTables 库的功能，为核心功能添加了额外的选项，例如额外的排序算法、API 方法和分页控件。插件不应与 DataTables “extras”混淆，后者是向 DataTables 添加附加功能的更重要的软件库。
回答by Gyrocode.com
SOLUTION
解决方案
Use Download Builderto generate links to JS/CSS files and include Bootstrap styling and Twitter Bootstrap library (if needed).
Include generated JS/CSS links into your project.
Use classes
table table-striped table-borderedfor your<table>as shown below:<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
使用下载生成器生成 JS/CSS 文件的链接，并包含 Bootstrap 样式和 Twitter Bootstrap 库（如果需要）。
将生成的 JS/CSS 链接包含到您的项目中。
table table-striped table-bordered为您使用类，<table>如下所示：<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
DEMO
演示
See this jsFiddlefor code and demonstration.
有关代码和演示，请参阅此 jsFiddle。
