Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by queryj

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<div class="container">
  <div>
    <h1>Example - expand row</h1>Run Update Fork TidyUp JSHint Collaboration Share jipexu Frameworks & Extensions jQuery Mobile 1.4.2 Bootstrap 3.2.0 Bootstrap 2.3.2 Fiddle Options External Resources 4 Remove Remove Remove Remove Languages Results Ajax Requests Legal, Credits and
    Links Keyboard shortcuts

  </div>
  <div id="toolbar">
  </div>
  <table id="myTable" data-toggle="table" data-detail-view="true" data-detail-formatter="detailFormatter">
    <thead>
      <tr>
        <th>Column A</th>
        <th>Column B</th>
        <th>Column C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>abcd</td>
        <td>other content</td>
        <!-- id number is generated by tt_template -->
        <span style="display: none;" id="desc0">
                    <strong class="bold">Description:</strong>
                    <br>
                    <pre>This is row with id=0, containing other content</pre>
                </span>
      </tr>
      <tr>
        <td>2</td>
        <td>efgh</td>
        <td>another content</td>
        <!-- id number is generated by tt_template -->
        <span style="display: none;" id="desc1">
                    <a href="#" data-toggle="collapse" data-target="#z1"><strong class="bold">Description:</strong></a>
                    <br>
                        <div id="z1" class="collapse"><pre>This is row with id=1, containing another content</pre></div>
                </span>
      </tr>
    </tbody>
  </table>
</div>

<div class="container">
  <div class="row">
    <div...

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */


/*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/

body {
  margin: 10px;
}

.thumb {
  background-color: gray;
}

.orange{
  background-color: orange;
}
.thumb:nth-child(even) {
  background-color: yellow;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

var $table = $('#myTable');

$table.on('expand-row.bs.table', function(e, index, row, $detail) {

  var res = $("#desc" + index).html();
  $detail.html(res);
  console.log('row expanded', e, index);
});

$table.find("tr>td>.detail-icon").on('click', function(e) {
  // NOTE - I assume expand-row behaivour added in bootstrap-table.js with a += or similar, so adding this here doesnt break that but does stop propagation

  // https://developer.mozilla.org/en-US/docs/Web/API/Event

  e.preventDefault();
  e.stopPropagation(); // need at least this line
  // e.stopImmediatePropagation(); // not sure how is different from above line
});



$table.on("click-row.bs.table", function(e, row, $tr) {


  // prints Clicked on: table table-hover, no matter if you click on row or detail-icon
  console.log("Clicked on: " + $(e.target).attr('class'), e);


  // In my real scenarion, trigger expands row with text detailFormatter..
  //$tr.find(">td>.detail-icon").trigger("click");
  $tr.find(">td>.detail-icon").triggerHandler("click");

});