Bootstrap Table
by jimkennelly
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 data-toggle="table"
data-height="300"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
data-search="true">
<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="action" data-formatter="actionFormatter1" data-events="actionEvents1">Action</th>
<th data-field="action" data-formatter="actionFormatter2" data-events="actionEvents2">Action</th>
</tr>
</thead>
</table>
CSS
.ml10 {
margin-left: 10px;
}
JavaScript
function actionFormatter1(value, row, index) {
return [
'<a class="like1" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a>',
'<a class="edit1 ml10" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove1 ml10" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
function actionFormatter2(value, row, index) {
return [
'<a class="like2" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a>',
'<a class="edit2 ml10" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove2 ml10" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
window.actionEvents1 = {
'click .like1': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log( row, index);
},
'click .edit1': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log( row, index);
},
'click .remove1': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log( row, index);
},
};
window.actionEvents2 = {
'click .like2': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log( row, index);
},
'click .edit2': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log( row, index);
},
'click .remove2': function (e, value, row, index) {
alert('You click remove icon, row: ' +...