Jquery datatable non-responsive inside bootbox

Question

I have several datatables that have links in the td fields that open up bootbox dialogs that display another datatable within the bootbox. Its more data on that specific field. The issue is bootbox opens with the datatable initialized just fine inside, however, the table is unresponsive and after a few clicks on the pagination the bootbox window just closes down. All other datatables are working as expected it is just the ones within a bootbox.

All of the datatables get initilized after page load

var ready = function() {
$('.data-table').dataTable({
    "aaSorting": [[ 0, "desc" ]],
    "sPaginationType": "bootstrap"
});

$(document).ready(ready);
$(document).on('page:load', ready);

Here is an example table with the links within that open the bootboxes and datatables. The onclick on the links is what opens the bootbox with the datatable. These are stored in partials to make repetition easier.

%table.table.table-hover.table-striped.table-responsive.data-table{style: 'table-layout: fixed; word-wrap:break-word;'}
            %thead
              %th.col-md-6.col-sm-6.col-xs-6
                %span.line Account
              %th.col-md-3.col-sm-3.col-xs-1
                %span.line No. Alerts
              %th.col-md-3.col-sm-3.col-xs-1
                %span.line No. Regions
            %tbody
              - aws_account_breakdowns.each do |aws_account_breakdown|
                %tr
                  %td.col-md-6.col-sm-6.col-xs-6= aws_account_breakdown.try(:arn_account)
                  %td.col-md-3.col-sm-3.col-xs-1
                    - id = aws_account_breakdown.arn_account.clean_string
                    %a{onclick: "bootbox.dialog({message: $('##{id}').html(), title: 'Alerts', buttons: { main: { label: 'Close', className: 'btn btn-primary' } }});"} #{aws_account_breakdown.try(:total_alerts)}
                    = render 'alerts', alerts: (aws_account_breakdown.alerts || []), id: id
                  %td.col-md-3.col-sm-3.col-xs-1
                    - region_id = id + '_region'
                    %a{onclick: "bootbox.dialog({message: $('##{region_id}').html(), title: 'Regions', buttons: { main: { label: 'Close', className: 'btn btn-primary' } }});"} #{aws_account_breakdown.try(:total_regions)}
                    = render 'regions', regions: (aws_account_breakdown.regions || []), id: region_id

Heres one of the partials which has the bootbox divs and the next datatable. This is the table that is not responsive, but is initialized.

- alerts = alerts || @alerts
- id = id || ''
%div.container
  %div.row-fluid
    %div.modal.fade
      %div.modal-dialog
        %div.modal-body{id: id}
          %table.table.table-hover.table-striped.table-responsive.data-table
            %thead
              %th.col-md-1
                %span.line Status
              %th.col-md-2
                %span.line Alert Name
              %th.col-md-1
                %span.line Alert Region
            %tbody
              - alerts.each do |alert|
                %tr
                  %td.col-md-1{style: 'vertical-align: top !important;'}= alert.try(:status).try(:humanize)
                  %td.col-md-2{style: 'vertical-align: top !important;'}= alert.try(:signature).try(:name).try(:humanize)
                  %td.col-md-1{style: 'vertical-align: top !important;'}= alert.try(:region).try(:code).try(:dasherize)

Answer 1

Problem solved use jQuery color box instead works flawlessly.