Rails 5：如何在部分 html 视图中加载 Datatable javascript答案

【问题标题】：Rails 5: How to load Datatable javascript in partial html viewRails 5：如何在部分 html 视图中加载 Datatable javascript
【发布时间】：2018-09-24 17:02:58
【问题描述】：

我正在尝试在我的一个部分视图中加载一个数据表，这只是一个表。数据表没有显示，只有“结果”部分中的 html。

Scenarios 是创建的父脚手架。结果是我在场景索引中渲染的部分表格：

我的问题最终是这样的：_results.html.erb 是否可以访问 sceanrios.coffee 文件？

项目\app\views\scenarios\_results.html.erb：

<table id="example" class="display" style="width:100%">
  <thead>
  <tr>
    <th>Submitter</th>
    <th>Scenario Name</th>
    <th>Options</th>
    <th colspan="8"></th>
  </tr>
  </thead>
  <tbody>
  <% @scenarios.each do |scenario| %>
    <tr>
      <td class="text-left"><%= scenario.submitter %></td>
      <td class="text-left"><%= scenario.scenario_name %></td>
      <td><%= render 'options', scenario: scenario %></td>
    </tr>
  <% end %>
  </tbody>
</table>

project\app\assets\javascripts\scenarios.coffee：

jQuery ->
  $(document).ready ->
    console.log("Working!")
    $('#example').dataTable()

Application.js：

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require dataTables/jquery.dataTables
//= require turbolinks
//= require_tree .

浏览器错误：

Uncaught TypeError: Cannot read property 'defaults' of undefined
    at jquery.dataTables.bootstrap.self-131f13015a9da63d8ed71f09b1c89ebd2fc8c81f1b2032430e06b8547d03f943.js?body=1:48
    at jquery.dataTables.bootstrap.self-131f13015a9da63d8ed71f09b1c89ebd2fc8c81f1b2032430e06b8547d03f943.js?body=1:40
    at jquery.dataTables.bootstrap.self-131f13015a9da63d8ed71f09b1c89ebd2fc8c81f1b2032430e06b8547d03f943.js?body=1:42

Uncaught TypeError: $(...).dataTable is not a function
    at HTMLDocument.<anonymous> (scenarios.self-8ab21e2e580c359da8a7fb9d7d533ce24740a882e2519d4675b5c305690a9b97.js?body=1:3)
    at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
    at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
    at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583)
    at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618)

Uncaught TypeError: Cannot read property 'LL_onclickHanlderExist' of null
    at window.LL_CustomUI.LL_CustomUI.animation.LL_CustomUI.animation.addClickHandler (hostui_animation.js?rnd=0.7801729638396486:1)

【问题讨论】：

标签： javascript ruby-on-rails datatables ruby-on-rails-5

【解决方案1】：

_results.html.erb 是否有权访问场景.coffee 文件？

是的，应该是。因为scenarios.coffee 是一个controller-specific-asset，这意味着它对所有scenarios_controller#actions 都可用，最终可用于由他们尊重的行为调用的尊重视图。

【讨论】：

好的，谢谢你的澄清。那么我的数据表咖啡脚本不正确吗？ javascript console.log 一段代码没有触发。
有！一共3个。请参阅我的问题以查看它们。我会调查错误，但我可能仍然需要帮助。

【解决方案2】：

我让它工作了，但我的代码可能存在多个问题：

在scenes.coffee中做出了这个改变：

$.noConflict() jQuery(文档).ready ($) -> $('#example').DataTable() 返回
确保您只需要一个版本的 jquery。检查您的 application.js 和您的应用程序布局头。
确保在数据表 jquery 之前加载核心 jquery。

【讨论】：