Jquery数据表内部无响应的bootbox

时间:2014-03-06 16:18:54

标签: javascript ruby-on-rails twitter-bootstrap jquery-datatables bootbox

我有几个数据表在td字段中有链接,这些数据表打开了引导框对话框,在bootbox中显示另一个数据表。它在该特定领域的更多数据。问题是bootbox打开,数据表初始化得很好,但是,表没有响应,只需点击一下分页后,bootbox窗口就会关闭。所有其他数据表正在按预期工作,它只是引导盒中的数据表。

所有数据表在页面加载后都会被启动

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

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

这是一个示例表,其中包含打开引导框和数据表的链接。链接上的onclick是用数据表打开bootbox的。这些存储在部分中以使重复更容易。

%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

下面是其中一个具有bootbox div和下一个数据表的部分。这是一个没有响应但是已初始化的表。

- 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)

1 个答案:

答案 0 :(得分:-1)

问题解决了使用jQuery颜色框而不是完美无缺。