Rails 4 DataTables column filter plug-in integration.

kukulkan

Hi,

I am building an application in Rails 4 with Datatables implemented, everything is working except the column filter plugin, the search fields on the footer of the table do not show.

I have tried my code with simple html and it works, but not with Rails.

If I use the method:

$(document).ready( function () {
        $('#table_id').DataTable().columnFilters(); });

I have the error "TypeError: $(...).DataTable(...).columnFilters is not a function"

And if this is used:

 <script type="text/javascript">
        $(document).ready(function() {
            // Setup - add a text input to each footer cell
            $('#example tfoot th').each( function () {
                var title = $('#example thead th').eq( $(this).index() ).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );
         
            // DataTable
            var table = $('#example').DataTable();
         
            // Apply the search
            table.columns().eq( 0 ).each( function ( colIdx ) {
                $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                    table
                        .column( colIdx )
                        .search( this.value )
                        .draw();
                } );
            } );
        } );
            </script>

No errors on console but the footer with the search is not shown.

My javascripts:

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/colreorder/1.1.2/js/dataTables.colReorder.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>

Both methods above produce the same result.

Did anyone came across with such a problem?
Any ideas or suggestions on how I can solve?