Question

我目前正在开展一个项目，我正在实施多个报告。报告过滤器远程提交给我的操作，返回结果显示在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中获得的排序，分页和其他很酷的功能。有人能指出我该怎么做呢？我试图渲染部分是.js.erb而不编写escape_javascript但是部分根本没有渲染。

Answer 1

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

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中存在的元素。从现在开始添加新表，您必须“重新分配”数据表行为......

Answer 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
     });
});

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

在.js.erb文件中渲染具有Jquery数据表的模板

2 个答案: