Bootstrap-table template

by joeycakes

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<!-- The table -->
<table id="table">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

<!-- The output -->
<pre id="output"></pre>

JavaScript

// Sample data
var data = [
    {
        "name": "bootstrap-table",
        "stargazers_count": "526",
        "forks_count": "122",
        "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
    },
    {
        "name": "multiple-select",
        "stargazers_count": "288",
        "forks_count": "150",
        "description": "A jQuery plugin to select multiple elements with checkboxes :)"
    },
    {
        "name": "bootstrap-show-password",
        "stargazers_count": "32",
        "forks_count": "11",
        "description": "Show/hide password plugin for twitter bootstrap."
    },
    {
        "name": "blog",
        "stargazers_count": "13",
        "forks_count": "4",
        "description": "my blog"
    },
    {
        "name": "scutech-redmine",
        "stargazers_count": "6",
        "forks_count": "3",
        "description": "Redmine notification tools for chrome extension."
    }
];

// Install the table
$(function () {
    $('#table').bootstrapTable({
        data: data
    });
});

// Output function
function output(str){
    $('#output').append(str + "\n");
}

// Tests
var table = $('#table').data('bootstrap.table');

// Test checkAll()
table.checkAll();
output("<b>checkAll</b>() \t@ " + table.getSelections().length);

// Test uncheckAll()
table.uncheckAll();
output("<b>uncheckAll</b>() \t@ " + table.getSelections().length);

// Test check()
table.check(1);
output("<b>check</b>() \t@ " + table.getSelections().length);

// Test uncheck()
table.uncheck(1);
output("<b>uncheck</b>() \t@ " + table.getSelections().length);

// Test checkBy()
table.checkBy({ field: 'name', values: [ "bootstrap-table" ] });
output("<b>checkBy</b>() \t@ " + table.getSelections().length);

// Test uncheckBy()
table.uncheckBy({ field: 'name', values: [ "bootstrap-table" ] });
output("<b>uncheckBy</b>() \t@ " + table.getSelections().length);