How to get Datatables.Responsive working the Backbone.Marionette (and Bootstrap).

drathnow

I have been trying to get Datatables Responsive working with tables in my Backbone.Marionnette app and have been unable to make it work. I have been initializing the table in the onShow event handler like like this:

onShow: function() {
    $('#iop-table').DataTable({
        responsive: true,
        columnDefs : [ 
            {responsivePriority : 1, targets : 0},
            {responsivePriority : 6, targets : -2},
            {responsivePriority : 7, targets : -3},
            {responsivePriority : 8, targets : -1}
        ],
        aoColumnDefs : [ 
            {
                bSortable : false,
                aTargets : [ 7 ]
            }
        ],
    });
}

And the Datatable does initialize and display nicely, but when I try resize the browser window, the table will shrink to the critical point where it should start removing columns but it doesn't. I will not shrink the table past a min width and will simply extend the table beyond the edge of the page.

I tried installing an event handler to catch the 'responsive-resize' event but I never see the event. I even set a break point in the Datatables.Responsive resize function but the breakpoint was never activated. Either the event is never fired, or the event is being intercepted by something else.

Below is my table definition:

<table id="iop-table" class="display dt-repsonsive no-wrap" style="width: 100%">
    <thead>
        <tr>
            <th>Tag</th>
            <th>Id</th>
            <th>Class</th>
            <th>Data Type</th>
            <th>Last Update (UTC)</th>
            <th>Value</th>
            <th>Alarm Status</th>
            <th align="center">
                <div class="btn-group">
                    <button id="updateAll" type="button" class="btn update btn-info btn-xs" title="Update All">
                        <i class="glyphicon glyphicon-cloud-upload"></i>
                    </button>
                    <button id="refreshAll" type="button" class="btn refresh btn-success btn-xs" title="Refresh All">
                        <i class="glyphicon glyphicon-refresh"></i>
                    </button>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

This is a small part of a much larger page but if someone would just start me off by letting me know if my Datatables initialization code is correct it would be a help. Any other tips would be greatly appreciated.

Something else I should add is that I'm also using Bootstrap with this app. Not sure if that helps.

Thanks,

drathnow

More information:

I installed Visual Event in my browser and took a look at my table to see what event listeners were subscribed. I compared the what Visual Event showed on my table to what it showed on a table where Responsive was working. What I notice is that on my table has few event listeners. In particular, there are no listeners for 'draw', 'column-visibility', 'column-reorder', 'column-sizing', and 'init'. These are all events that the working table has subscribers for (i.e. datatables.responsive).

So it appears as though the initialization isn't working. Is there something wrong with the way that I'm initialization the table?