Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="alert alert-success" id="eventsResult">
    Here is the result of event.
</div>
<table id="eventsTable"
       data-toggle="table"
       data-height="300"
       data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
       data-pagination="true"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-unique-id="name"
       data-toolbar="#toolbar">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="name" data-formatter="myFormatter">Name</th>
        <th data-field="stargazers_count" data-cell-style="myCellStyler">Stars</th>
        <th data-field="forks_count" data-formatter="wrapFormatter">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

JavaScript

// NOTE - Simple example with event logging, formatter and cellstyle options
//		- also simple example of dynamic cell tooltips, just use cellStyle if want special handling

    function myFormatter(value, row, index) {
        var icon = row.stargazers_count > 0 ? 'glyphicon-star' : 'glyphicon-star-empty';
        console.log('myFormatter', [this,value,row,index]);
        return '<i class="glyphicon ' + icon + '"></i> ' + value;
    }


    function wrapFormatter(value, row, index) {
        // NOTE - you 'could' apply internal padding and negative margin to make it fully fill TD, but ive never liked doing that because you need to be 100% sure that reponsive or other browsers wont affect that at all
        return ( (row.forks_count > 0) ? '<a style="width:100%;display:block;" class="bg-info" title="'+ value + ' forks in this project, and 0 spoons!">' + value + '</a>' : value);
    }

    function myCellStyler(value, row, index) {
        var classname = row.stargazers_count > 0 ? 'bg-success' : '';
        console.log('myCellStyler', [this,value,row,index]);
        return {classes: classname};
    }


$(function () {
    var $result = $('#eventsResult');

    $('#eventsTable').on('all.bs.table', function (e, name, args) {
        console.log('Event:', name, ', data:', args);
    })
    .on('post-body.bs.table', function (){

        $("#eventsTable tbody > tr > td").each(function(){
			$(this).attr('title',$(this).text());
        });
    })
    .on('click-row.bs.table', function (e, row, $element) {
        $result.text('Event: click-row.bs.table');
    })
    .on('dbl-click-row.bs.table', function (e, row, $element) {
        $result.text('Event: dbl-click-row.bs.table');
    })
    .on('sort.bs.table', function (e, name, order) {
        $result.text('Event: sort.bs.table');
    })
    .on('check.bs.table', function (e, row) {
        $result.text('Event: check.bs.table');
    })
    .on('uncheck.bs.table', function (e, row) {
        $result.text('Event:...