让 dataTables 和 twitter bootstrap 正常工作的问题答案

【问题标题】：Issue getting dataTables and twitter bootstrap working让 dataTables 和 twitter bootstrap 正常工作的问题
【发布时间】：2012-04-13 07:40:23
【问题描述】：

我正在尝试在我的 rails 3 应用程序中重新创建 this table。我相信我已经包含了所有必要的 javascript 文件，但我不断收到此错误：

Uncaught TypeError: Cannot read property 'oStdClasses' of undefined

我直接复制了他的 HTML 和 javascript 文件，所以我不确定可能是什么问题。我对 jquery/javascript 很陌生，所以我确定我只是错过了一些愚蠢的东西。任何提示都会很棒。

编辑：我猜这些文件是按错误的顺序加载的，因为当我查看控制台时，我看到的是这样的：

Started GET "/" for 127.0.0.1 at 2012-03-29 11:17:14 -0400
Processing by HomeController#index as HTML
Rendered home/index.html.erb within layouts/application (18.0ms)

Compiled bootstrap-responsive.css  (0ms)  (pid 37780)
Compiled bootstrap.css  (0ms)  (pid 37780)
Compiled docs.css  (0ms)  (pid 37780) 
Compiled home.css  (16ms)  (pid 37780)
Compiled scaffolds.css  (0ms)  (pid 37780)
Compiled application.css  (33ms)  (pid 37780)
Compiled jquery.js  (1ms)  (pid 37780)
Compiled jquery_ujs.js  (0ms)  (pid 37780)
***Compiled DT_bootstrap.js  (0ms)  (pid 37780)  #=> Wrong order?
Compiled bootstrap-alert.js  (0ms)  (pid 37780)
Compiled bootstrap-button.js  (0ms)  (pid 37780)
Compiled bootstrap-carousel.js  (0ms)  (pid 37780)
Compiled bootstrap-collapse.js  (0ms)  (pid 37780)
Compiled bootstrap-dropdown.js  (0ms)  (pid 37780)
Compiled bootstrap-modal.js  (0ms)  (pid 37780)
Compiled bootstrap-popover.js  (0ms)  (pid 37780)
Compiled bootstrap-scrollspy.js  (0ms)  (pid 37780)
Compiled bootstrap-tab.js  (0ms)  (pid 37780)
Compiled bootstrap-tooltip.js  (2ms)  (pid 37780)
Compiled bootstrap-transition.js  (0ms)  (pid 37780)
Compiled bootstrap-typeahead.js  (0ms)  (pid 37780)
Compiled google-code-prettify/prettify.js  (0ms)  (pid 37780)
Compiled home.js  (118ms)  (pid 37780)
***Compiled jquery-1.7.1.min.js  (1ms)  (pid 37780)
***Compiled jquery.dataTables.js  (6ms)  (pid 37780)   
***Compiled jquery.dataTables.min.js  (0ms)  (pid 37780)
Compiled application.js  (292ms)  (pid 37780)
Completed 200 OK in 574ms (Views: 573.7ms)

我将尝试手动重新排序它们，看看是否会有所不同。

【问题讨论】：

一个代码示例会很有帮助。还要确保您确实在文档的开头包含了 DataTables 脚本？
我在脑海中包含了<%= javascript_include_tag "application" %>，当我检查它时，我可以从 Chrome 中看到该文件。
抱歉，我能否也看到您用来启动它的代码。我假设它与您发布的链接相同。对吗？
另外，我对 Ruby 一无所知。但我之前使用过 DataTables，所以我很熟悉。但是看看你发布的内容。看起来您包含两次 DataTables 脚本。 ***已编译的 jquery.dataTables.js (6ms) (pid 37780) ***已编译的 jquery.dataTables.min.js (0ms) (pid 37780) 我认为这不会造成问题。但你应该只需要一个，因为它们都是同一个文件。

标签： javascript jquery ruby-on-rails datatables twitter-bootstrap

【解决方案1】：

我的问题是文件没有按正确的顺序加载。我使用this answer 手动重新排序文件，使其正常工作。

【讨论】：

【解决方案2】：

如果您使用的是 jquery-datatable-rails gem，请确保您的 application.js 中同时需要基本数据表 JavaScript 和 twitter 引导变量，例如：

//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap

只包含 bootstrap JS 文件会导致错误。

【讨论】：