JSFiddle - React, Tailwind, and code Playground

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>
<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/flatJSON/bootstrap-table-flatJSON.js"></script>
<div class="container">
    
    <!-- Table # 1 -->
    
    <h4 class="page-header">Table # 1</h4>

    <table id="table-1"></table><br />

    <pre id="output-1"></pre>
    
    <!-- Table # 2 -->
    
    <h4 class="page-header">Table # 2 (multidimensional data using flatJSON)</h4>
    
    <table id="table-2"></table><br />

    <pre id="output-2"></pre>
    
</div>

JavaScript

// Sample data
var data1 = [],
    data2 = [];

for(var i = 0; i < 5; i++){
    // Standard data
    data1.push({
        id: i,
        col1: i + 1,
        col2: (i + 1) * 5
    });
    // flatJSON data
    data2.push({
        Model: {
            id: i,
            col1: i + 1,
            col2: (i + 1) * 5
        }
    });
}

/** Table # 1 **/

var $table1 = $('#table-1').bootstrapTable({
    columns: [
        { field: 'state', checkbox: true },
        { field: 'id', title: 'ID' },
        { field: 'col1', title: 'Column 1' },
        { field: 'col2', title: 'Column 2' }
    ],
    data: data1
});

// Test the checkAll method
$table1.bootstrapTable('checkAll');
$('#output-1').html('<b>checkAll</b> resulted in <i>' + $table1.bootstrapTable('getSelections').length + '</i> row(s) selected\n');

// Test the uncheckAll method
$table1.bootstrapTable('uncheckAll');
$('#output-1').append('<b>uncheckAll</b> resulted in <i>' + $table1.bootstrapTable('getSelections').length + '</i> row(s) selected\n');

// Test the checkBy method
$table1.bootstrapTable('checkBy', { field: 'id', values: [ 1 ] });
$('#output-1').append('<b>checkBy</b> resulted in <i>' + $table1.bootstrapTable('getSelections').length + '</i> row(s) selected\n');

$('#output-1').append('--------------------------------------------------\n');

// Test the length after all methods have run
$('#output-1').append('<b>bootstrapTable("getSelections")</b> length is <i>' + $table1.bootstrapTable('getSelections').length);
        
/** Table # 2 **/

var $table2 = $('#table-2').bootstrapTable({
    flat: true,
    columns: [
        { field: 'state', checkbox: true },
        { field: 'Model.id', title: 'ID' },
        { field: 'Model.col1', title: 'Column 1' },
        { field: 'Model.col2', title: 'Column 2' }
    ],
    data: data2
});


// Test the checkAll method
$table2.bootstrapTable('checkAll');
$('#output-2').html('<b>checkAll</b> resulted in <i>' + $table2.bootstrapTable('getSelections').length + '</i>...