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 jimkennelly

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">
<link rel="stylesheet" href="https://github.com/wenzhixin/bootstrap-table/blob/master/dist/bootstrap-table.min.css">
<script src="https://cdn.rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
<input type="button" id="btn"  value="change data">
    
    
    <table id="table" data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-show-pagination-switch="true" data-pagination="true" data-show-footer="true" data-side-pagination="server">
    <thead>
        <tr>
            <th data-field="cobalt_name" data-sortable="true"></th>
            <th data-field="cobalt_officeidname" data-sortable="true">Office</th>
            <th data-field="cobalt_committeepositionidname" data-sortable="true">Last Year</th>
            <th data-field="IsDelegate" data-sortable="true" data-formatter="formatDelegate">Delegate</th>
            <th data-field="IsAlternate" data-sortable="true" data-formatter="formatAlternate">Alternate</th>
        </tr>
    </thead>
</table>
<br><br><br>

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 data = [{
    "cobalt_contactid": "e4719d80-e9e2-428b-a86f-430f54070faf",
    "cobalt_officeidname": "Ackerman Real Estate",
    "cobalt_name": "Ackerman, Charles - R   - REALTOR®",
    "cobalt_committeepositionidname": null,
    "IsDelegate": 0,
    "IsAlternate": 0
}, {
    "cobalt_contactid": "73eaef01-cfe6-47ef-9eac-ab6374f69dbe",
    "cobalt_officeidname": "Realty USA",
    "cobalt_name": "Adams, Maureen A - R   - REALTOR®",
    "cobalt_committeepositionidname": null,
    "IsDelegate": 0,
    "IsAlternate": 0
}, {
    "cobalt_contactid": "f56253c5-7eb2-42eb-9035-b0a4f77d774c",
    "cobalt_officeidname": "Nora M E Davis                ",
    "cobalt_name": "Agnew, Raymond - R   - REALTOR®",
    "cobalt_committeepositionidname": null,
    "IsDelegate": 0,
    "IsAlternate": 0
}];




var $table = $('#table'),
    $remove = $('#remove');
$(function () {

    $( "#btn" ).click(function() {
  alert(data[0].cobalt_officeidname);
        data[0].cobalt_officeidname = "xxxx";
  alert(data[0].cobalt_officeidname);
        $('#table').bootstrapTable('load');
        
                                   
        
});
    
   
    
    $table.bootstrapTable({
        height: getHeight(),
        data: data
    });
    $table.on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
        $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
    });
    $table.on('all.bs.table', function (e, name, args) {
        console.log(name, args);
    });
    $remove.click(function () {
        var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
        $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
        });
        $remove.prop('disabled', true);
    });
    $(window).resize(function () {
        $table.bootstrapTable('resetView', {
     ...