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>
<table id="crmtable" data-toggle="table" data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/" data-show-columns="true">
<button type="button" id="checkall" class="btn btn-default">Check all</button>
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description" data-visible="false">Description</th>
</tr>
</thead>
</table>
<br/>
<div class="alert alert-success" id="eventsResult">
Here is the result of event.
</div>
JavaScript
checkall = document.getElementById('checkall');
checkall.onclick = function () {
$('#crmtable').bootstrapTable('showColumn', ('nom'));
$('#crmtable').bootstrapTable('showColumn', ('stargazers_count'));
$('#crmtable').bootstrapTable('showColumn', ('forks_count'));
$('#crmtable').bootstrapTable('showColumn', ('description'));
};
var $result = $('#eventsResult');
$('#crmtable').on('all.bs.table', function (e, name, args) {
console.log('Event:', name, ', data:', args); // , ', this:', $(this));
})
.on('post-header.bs.table', function(e){
var $dd = $('.bootstrap-table .columns .dropdown-menu');
if($dd.length > 0 && !$dd.hasClass('custom-columns-added'))
{
console.log('$dd',$dd);
var $checkall = $('<button type="button" id="checkall" class="btn btn-default">Check all</button>');
$checkall.onclick = function (e) {
e.preventDefault();
$('#crmtable').bootstrapTable('showColumn', ('nom'));
$('#crmtable').bootstrapTable('showColumn', ('stargazers_count'));
$('#crmtable').bootstrapTable('showColumn', ('forks_count'));
$('#crmtable').bootstrapTable('showColumn', ('description'));
};
var hstr = "";
hstr += "<li><label><input type='checkbox' data-field='name' value='0' checked='checked'> Name</label></li>";
// hstr += '<li><label>'+$checkall+'</label></li>';
hstr += '<li><hr></hr></li>';
$dd.prepend(hstr);
$dd.prepend($('<li>').append('<label>').append($checkall));
$dd.addClass('custom-columns-added');
}
})
.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) {
...