Bootstrap Table

by Dariusz Gardyński

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<div class="container">
  <div id="toolbar">
    <button id="remove" class="btn btn-danger" disabled>
      <i class="glyphicon glyphicon-remove"></i> Delete
    </button>
  </div>
  <table id="table" data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-detail-view="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2"
  data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="client" data-response-handler="responseHandler">
  </table>
</div>

JavaScript

var $table = $('#table'),
  $remove = $('#remove'),
  selections = [];

function initTable() {
  $table.bootstrapTable({
    height: $(window).height(),
    data: [{
      "id": 0,
      "name": "Item 0",
      "price": "$0",
      "state": false
    }, {
      "id": 1,
      "name": "Item 1",
      "price": "$1",
      "state": false
    }, {
      "id": 2,
      "name": "Item 2",
      "price": "$2",
      "state": false
    }, {
      "id": 3,
      "name": "Item 3",
      "price": "$3",
      "state": false
    }, {
      "id": 4,
      "name": "Item 4",
      "price": "$4",
      "state": false
    }, {
      "id": 5,
      "name": "Item 5",
      "price": "$5",
      "state": false
    }, {
      "id": 6,
      "name": "Item 6",
      "price": "$6",
      "state": false
    }, {
      "id": 7,
      "name": "Item 7",
      "price": "$7",
      "state": false
    }, {
      "id": 8,
      "name": "Item 8",
      "price": "$8",
      "state": false
    }, {
      "id": 9,
      "name": "Item 9",
      "price": "$9",
      "state": false
    }],
    uniqueId: 'id',
    columnsOptionsDefaults: {
      // also we can add
      // class: '.test'
      // attrHtml: {
      //    onclick: 'alert("I work :)!")'
      // },
      // rowspan: 2,
      // colspan: 2,
      // and any other
      hAlign: 'center',
      vAlign: 'middle',
      head: {
        css: {
          color: 'green'
        },
        hAlign: 'center',
        vAlign: 'middle'
      },
      colspan: 1 // rowsOptionsDefaultscolumnsOptionsDefaults<column<row try to remove
    },
    rowsOptionsDefaults: {
      css: {
        color: 'orange'
      },
      rows: {
        0: {
          css: {
            'font-size': '20px'
          }
        },
        1: {
          css: {
            'font-size': '20px'
          }
        },
        2: {
          head: {
            css: {
              color: 'blue'
            }
          }
        },
        3: {
          colspan: 2
        }
      }
 ...