Why isn't DataTables working in my rails partial?

Question

I have a table in a partial in my rails app, and I want to use DataTables to make it look nice. I am using the jquery-datatables-rails gem.

My partial:

 <script type="text/javascript">
    $(document).ready(function() {
    $('#businesses').dataTable();
    } );
    </script>

<table id="businesses">
            <thead>
                <tr>
                            Bunch of headers here...

                </tr>
                </thead>

                <tbody>
                <tr>
                Lots and lots of code here...
                </tr>
            </tbody>
        </table>

application.js:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require_tree .

application.css :

*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require dataTables/jquery.dataTables
 *= require_tree .
 */

The DataTables files are referenced properly in application.js and in application.css as well.

Thanks!

Answer 1

You should move your js code to inside your application.js file.

So, no script tags inside your html.erb, to do the javascript part you should have an application.js like that:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require_tree .

$('#businesses').dataTable();
    } );