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"...

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;
}

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");
    
});