另一个Bootstrap表中的Bootstrap表不可排序

Question

我有一个项目，其中包含一个包含许多行的引导表，每行都有一个打开子表的下拉按钮。我已在子表上启用了sortable，但是单击标题以执行sort函数会导致子表返回到父表。子表永远不会被排序。

父 - table.html.haml

.bootstrap-table-dropdown-overflow
  #sla-custom-toolbar
    %button.btn.btn-success.otf_service_new{type: "button", aria: {label: "Add Line Item"}}= t(:line_item)[(is_protocol_type_study? (@protocol)) ? :add_line_item_study : :add_line_item_project]
  %table.study_level_activities{id: "study-level-activities-table", data: {toggle: 'table', search: "true", "show-columns" => "true", "show-refresh" => "true", "show-toggle" => "true", url: line_items_path(format: :json, protocol_id: protocol.id), striped: "true", toolbar: "#sla-custom-toolbar", "show-export" => "true", "export-types" => ['excel']}}
    %thead.primary-header
      %tr
        %th{data: {class: 'fulfillments_button', align: "left", field: "fulfillments_button"}}
        %th{data: {class: 'service', align: "left", field: "service"}}
          = t(:line_item)[:service]
        %th{data: {class: 'act_num wrap', align: "left", sortable: "true", field: "account_number"}}
          = t(:line_item)[:account_number]
        %th{data: {class: 'contact wrap', align: "left", sortable: "true", field: "contact"}}
          = t(:line_item)[:contact]
        %th{data: {class: 'qty_type', align: "left", field: "quantity_type"}}
          = t(:line_item)[:qty_type]
        %th{data: {class: 'qty_req', align: "left", sortable: "true", field: "quantity_requested"}}
          = t(:line_item)[:qty_req]
        %th{data: {class: 'qty_rem', align: "left", sortable: "true", field: "quantity_remaining"}}
          = t(:line_item)[:qty_rem]
        %th{data: {class: 'started', align: "left", sortable: "true", sorter: "dateSorter", field: "date_started"}}
          = t(:line_item)[:started]
        %th{data: {class: 'components', align: "center", field: "service_components"}}
          = t(:line_item)[:components]
        %th{data: {class: 'last_fulfillment', align: "left", sortable: "true", sorter: "dateSorter", field: "last_fulfillment"}}
          = t(:line_item)[:last_fulfillment]
        %th{data: {class: 'options', align: "center", field: "options"}}
          = t(:actions)[:actions]

子table.html.haml

%td{colspan: 11}
  .bootstrap-table-dropdown-overflow
    #fulfillment-custom-toolbar
      %button.btn.btn-success.otf_fulfillment_new{type: "button", "aria-label" => "Add Fulfillment", data: {line_item_id: line_item.id}}
        = t(:fulfillment)[:add_fulfillment]
    %table.fulfillments{id: "fulfillments-table", data: {toggle: 'table', search: "true", "show-columns" => "true", "show-refresh" => "true", "show-toggle" => "true", url: fulfillments_path(format: :json, line_item_id: line_item.id), striped: "true", toolbar: "#fulfillment-custom-toolbar", "show-export" => "true", "export-types" => ['excel']}}
      %thead.secondary-header
        %tr
          %th{data: {class: 'fulfillment_date', align: "left", sortable: "true", sorter: "dateSorter", field: "fulfillment_date"}}
            = t(:fulfillment)[:fulfillment_date]
          %th{data: {class: 'quantity', align: "left", sortable: "true", field: "quantity"}}
            = t(:fulfillment)[:quantity]
          %th{data: {class: 'qty_type', align: "left", sortable: "true", field: "quantity_type"}}
            = t(:fulfillment)[:qty_type]
          %th{data: {class: 'performed_by', align: "left", sortable: "true", field: "performed_by"}}
            = t(:fulfillment)[:performed_by]
          %th{data: {class: 'components', align: "center", field: "components"}}
            = t(:fulfillment)[:components]
          %th{data: {class: 'options', align: "center", field: "options"}}
            = t(:actions)[:actions]

index.js.coffee

$("#fulfillments_row").attr('data-line_item_id', "<%= @line_item.id %>")
$("#fulfillments_row").html("<%= escape_javascript(render(:partial =>'study_level_activities/fulfillments_table', locals: {line_item: @line_item})) %>");
$("#fulfillments_row").prev("tr").first().find(".otf_fulfillments > .glyphicon").removeClass("glyphicon-refresh").addClass("glyphicon-chevron-down").parents("button").attr('data-original-title', 'Hide Fulfillments')
$("#fulfillments-table").bootstrapTable()