Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css">
<div class="table-responsive">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    <thead>
      <tr>
        <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
        <th data-column-id="sender">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        <th data-column-id="sender1">Sender</th>
        <th data-column-id="sender2">Sender</th>
        <th data-column-id="sender3">Sender</th>
        <th data-column-id="sender4">Sender</th>
        <th data-column-id="sender5">Sender</th>
        <th data-column-id="sender6">Sender</th>
        <th data-column-id="sender7">Sender</th>
        <th data-column-id="sender8">Sender</th>
        <th data-column-id="sender9">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        <th data-column-id="commands" data-formatter="commands" data-sortable="false">Coluna</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-left">1122</td>
        <td class="text-left">[email protected]@outlook.com</td>
        <td class="text-left">2014-10-27T07:23:43</td>
        <td class="text-left"></td>
      </tr>
      <tr>
        <td class="text-left">1123</td>
        <td class="text-left">[email protected]@outlook.com</td>
        <td class="text-left">2014-10-27T07:23:43</td>
        <td class="text-left"></td>
      </tr>
      <tr>
        <td class="text-left">1124</td>
        <td class="text-left">[email protected]@outlook.com</td>
     ...

JavaScript

var rowIds = [];
var grid = $("#grid-command-buttons").bootgrid({
  selection: true,
  multiSelect: false,
  rowSelect: true,
  formatters: {
    "commands": function(column, row) {
      return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " +
        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
    }
  }
}).on("selected.rs.jquery.bootgrid", function(e, rows) {
  console.log("Select Event Fired");
  console.log(rows);
  for (var i = 0; i < rows.length; i++) {
    rowIds.push({
      id: rows[i].id,
      ad: rows[i].sender,
      cns: rows[i].received
    });
  }
  console.log(rowIds);

}).on("deselected.rs.jquery.bootgrid", function(e, rows) {
  console.log("Deselect Event Fired");
  console.log(rows);
  for (var i = 0; i < rows.length; i++) {
    $.each(rowIds, function(ix) {
      if (rowIds[ix].id == rows[i].id) {
        rowIds.splice(ix, 1);
        return false;
      }
    });
  }
  console.log(rowIds);

});