Twitter Bootstrap Question posted in

Twitter bootstrap – bootstrap-table: how to nest one table into another?

I’m using this bootstrap-table. I’d like to nest one table into another.

$(document).ready(function() {
  var t = [{
    "id": "1",
    "name": "john",
  }, {
    "id": "2",
    "name": "ted"
  }];


  //TABLE 1
  $('#summaryTable').bootstrapTable({
    data: t,
    detailFormatter: detailFormatter
  });

  function detailFormatter(index, row, element) {
    $(element).html(row.name);
    $(element).html(function() {
      //I was thinking of putting the code here, but I don't know how to do it so it will work,
      //except javascript, it needs to be put this html code <table id="detailTable"></table>

    });


    //   return [

    //    ].join('');
  }

  //TABLE 2
  var t2 = [{
    "id": "1",
    "shopping": "bike",
  }, {
    "id": "2",
    "shopping": "car"
  }];
  $('#detailTable').bootstrapTable({
    data: t2,
    columns: [{
      field: 'id',
      title: 'id'
    }, {
      field: 'shopping',
      title: 'Shopping detail'
    }, {
      field: 'status',
      checkbox: true
    }],
    checkboxHeader: false

  });
  $('#detailTable').on('check.bs.table', function(e, row, $el) {
    alert('check index: ' + row.shopping);
  });
  $('#detailTable').on('uncheck.bs.table', function(e, row, $el) {
    alert('uncheck index: ' + row.shopping);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>



<div class="container">
  <p>TABLE 1</p>
  <table id="summaryTable" data-detail-view="true">
    <thead>
      <tr>
        <th data-field="id" data-align="center" data-width="20px">id</th>
        <th data-field="name" data-align="center">Name</th>
      </tr>
    </thead>
  </table>
  <br>

  <p>TABLE 2</p>
  <table id="detailTable"></table>

</div>

Here is the link of my demo: fiddle

There are two tables. Table 1 has expandable rows and I want to put Table 2 into every row of table 1. There is this function called detailFormatter which does this and where you can return a string or render an element (I was playing with it, but I can’t make it work). For this demo the table 1 is created with some html code and the table 2 uses only javascript, but there is this initiating div <table id="detailTable"></table> (it doesn’t matter for me which way is done). So, the question is how to put the table 2 into table 1 with possibility of using its events (like check or uncheck checkbox) as the demo shows for table2? Later on, I’d like to use this event onExpandRow so when the user expands the row of table 1 it will get the data from a database and it’ll fill out the table 2.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found another way of nesting one table into another using (partly) dynamic table creation (referring to my posted question when using bootstrap-table).

    var expandedRow = row.id;
$(element).html(
    "<table id='detailTable"+expandedRow+"'><thead><tr><th data-field='id2' data-align='center' data-width='20px'>id2</th>" +
    "<th data-field='shopping' data-align='center'>Shopping detail</th>" +
    "<th data-field='status' data-checkbox='true'></th>" +
    "</tr></thead></table>");

$('#detailTable'+expandedRow).bootstrapTable({
  data: t2,
  checkboxHeader: false
});

    I think this way is more independent. There is no need to have one panel opened at the time. The events and methods seems to be working fine.

    Full code here.


  2. 0

    Well just clone your detailTable and put it in each row with detailFormatter as below:

    function detailFormatter(index, row, element) {
    $(element).html($('#detailTable').clone(true));
}

    Now there will be duplicate id‘s created when you do clone, so you just remove it by changing its id as below:

    function detailFormatter(index, row, element) {
     $(element).html($('#detailTable').clone(true).attr('id',"tbl_"+row.id));
}

    Also, you can hide the #detailTable since you are just having it to append it in another table and once you hide it you need to add show to cloned tables as all the properties will be copied to in clone(true) which can be done as below:

    function detailFormatter(index, row, element) {
    $(element).html($('#detailTable').clone(true).attr('id',"tbl_"+row.id).show());
}
//.....
//.....
//.....
//At the end
$("#detailTable").hide();

    A complete DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search