Render template having Jquery datatables in .js.erb file - ruby-on-rails

Question

I am currently working on a project where I am implementing several reports. The report filters are remotely submitted to my action and the return results are displayed in Datatable with searching,sorting and pagination.
I have a drg.js.erb file which is having code like this :
var html = "<%= escape_javascript(render(partial: 'drg_datatable',formats: [:html],locals: {result: #result})) %>";
$("#datatable-result").append(html);
The partial _drg_datatable.html.erb is having datatable implemented like this. Below is my _drg_datatable.html.erb file :
<% 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 %>
The problem I am facing is that when I render the partial _drg_datatable.html.erb using .js.erb file it creates the table but escapes the javascript to add sorting,pagination and other cool features we get in Jquery Datatables. Can someone point me how should I go about doing this ? I have tried to render the partial is .js.erb without writing escape_javascript but then the partial does not get rendered at all.

Answer 1

You must explicitly call the datatable js function in your drg.js.erb in order to "datatablize" your table. Ex:
var html = "<%= escape_javascript(render(partial: 'drg_datatable',formats: [:html],locals: {result: #result})) %>";
$("#datatable-result").append(html);
$('#results').dataTable();
I suppose you have something like:
$(document).ready(function(){
$('a selector of yours').dataTable();
});
somewhere in your application's javascripts. This runs once, after document load and applies to elements existent to your dom. Since now you are adding a new table you have to "re assign" the datatable behavior...

Answer 2

#grotori: Your solution gave me a hint of fixing it. I renamed my datatable id with a name which was not used in the application anywhere. I removed the initial implementation of the datatable in the partial and modified the code to render the partial first and than apply datatable to it. Here is what I did :
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
});
});
Hope this helps other trying to achieve the same thing.