在 .js.erb 文件中呈现具有 Jquery 数据表的模板答案

【问题标题】：Render template having Jquery datatables in .js.erb file在 .js.erb 文件中呈现具有 Jquery 数据表的模板
【发布时间】：2013-05-03 08:25:40
【问题描述】：

我目前正在执行一个项目，我正在实施多个报告。报告过滤器远程提交给我的操作，返回结果显示在 Datatable 中，并带有搜索、排序和分页。

我有一个 drg.js.erb 文件，其中包含如下代码：

var html = "<%= escape_javascript(render(partial: 'drg_datatable',formats: [:html],locals: {result: @result})) %>";
$("#datatable-result").append(html);

部分 _drg_datatable.html.erb 的数据表是这样实现的。下面是我的 _drg_datatable.html.erb 文件：

<% if result %>
  <table id="results" class="table table-striped table-bordered display">
  <% case params[:view] %>
    <% when "ahfs" %>
      <%= datatable_ahfs_result(result) %>
    <% when "drg_code"  %>
      <%= datatable_drg_result(result) %>
    <% when "inpharmics_id"  %>
      <%= datatable_inpharmics_id_result(result) %>
    <% when "provider"  %>
        <%= datatable_provider_result(result) %>
    <% else %>

   <%  end %>
  </table>  
<% end %>

我面临的问题是，当我使用 .js.erb 文件渲染部分 _drg_datatable.html.erb 时，它会创建表，但会转义 javascript 以添加排序、分页和我们在 Jquery Datatables 中获得的其他很酷的功能。有人可以指出我该怎么做吗？我试图在不编写 escape_javascript 的情况下渲染部分是 .js.erb，但是部分根本没有被渲染。

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 ruby-on-rails-3.2 datatables erb

【解决方案1】：

您必须在 drg.js.erb 中显式调用 datatable js 函数才能“datatablize”您的表。例如：

var html = "<%= escape_javascript(render(partial: 'drg_datatable',formats: [:html],locals: {result: @result})) %>";
$("#datatable-result").append(html);
$('#results').dataTable();

我想你有类似的东西：

$(document).ready(function(){
  $('a selector of yours').dataTable();
});

在您应用程序的 javascripts 中的某个位置。这会在文档加载后运行一次，并应用于您的 dom 中存在的元素。由于现在您要添加一个新表，因此您必须“重新分配”数据表行为...

【讨论】：

【解决方案2】：

@grotori：你的解决方案给了我一个修复它的提示。我用一个在任何地方都没有使用过的名称重命名了我的数据表 ID。我在部分中删除了数据表的初始实现，并修改了代码以首先呈现部分，然后将数据表应用于它。这是我所做的：

var html = "<%= escape_javascript(render(partial: 'drg_datatable',formats: [:html],locals: {result: @result})) %>";
$("#datatable-result").html(html);

jQuery(function() {
    $("#drg-results").dataTable({
        "sDom": "<'row-fluid'<'span4'l><'span7 pull-right'f>r>t<'row-fluid'<'span4'i><'span7 pull-right'p>>",
        "sPaginationType": "bootstrap",
        "sScrollX": "100%",
        "bDestroy": true,
        "bProcessing": true,
        "bScrollCollapse": true
     });
});

希望这有助于其他尝试实现相同目标的人。

【讨论】：