Bootstrap Table example

by Jscaptcha

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>

   <div class="table-padding-top">
  <div class="container">
   <div class="dtHorizontalVerticalExampleWrapper">
     
     <div class="col-sm-12">
         <div class="dataTables_scrollBody" style="position: relative;overflow: auto;width: 100%;height: 200px;">
           
             <table class="table table-bordered" id="dtHorizontalVerticalExample">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
       <th scope="col">Handle</th>
       <th scope="col">Handle</th>
       <th scope="col">Handle</th>
       <th scope="col">Handle</th>
       <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Markfgfgfgfgffg</td>
      <td>Ottofgfgfgfgfgfgfgfgfgfgffg</td>
      <td>@mdofgfgfgfgfgfgfgfg</td>
        <td>Mark</td>
      <td>Ottofgfgfgfgfgfg</td>
      <td>@mdo</td>
        <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
        <td>Mark</td>
      <td>Otto</td>
    </tr>
  
  </tbody>
</table>
       </div>
        
         
     </div>
     
       
    </div>
</div>
</div>

CSS

.fixed-table-container tbody td {
    border-left: none;
}

.bootstrap-table table.table.my-thick-rows-table tbody tr > td{
    padding:14px !important;
}

JavaScript

// NOTE IMPORTANT - check where bootstrap-table.js and other external links pointing to (user branch commit, user master, wenzhixin commit or wenzhixin master?)

$(function () {
    var $result = $('#eventsResult');

    $('#eventsTable').on('all.bs.table', function (e, name, args) {
        console.log('Event:', name, ', data:', args);
    })
    .on('click-row.bs.table', function (e, row, $element) {
        $result.text('Event: click-row.bs.table');
    })
    .on('dbl-click-row.bs.table', function (e, row, $element) {
        $result.text('Event: dbl-click-row.bs.table');
    })
    .on('sort.bs.table', function (e, name, order) {
        $result.text('Event: sort.bs.table');
    })
    .on('check.bs.table', function (e, row) {
        $result.text('Event: check.bs.table');
    })
    .on('uncheck.bs.table', function (e, row) {
        $result.text('Event: uncheck.bs.table');
    })
    .on('check-all.bs.table', function (e) {
        $result.text('Event: check-all.bs.table');
    })
    .on('uncheck-all.bs.table', function (e) {
        $result.text('Event: uncheck-all.bs.table');
    })
    .on('load-success.bs.table', function (e, data) {
        $result.text('Event: load-success.bs.table');
    })
    .on('load-error.bs.table', function (e, status) {
        $result.text('Event: load-error.bs.table');
    })
    .on('column-switch.bs.table', function (e, field, checked) {
        $result.text('Event: column-switch.bs.table');
    })
    .on('page-change.bs.table', function (e, number, size) {
        $result.text('Event: page-change.bs.table');
    })
    .on('search.bs.table', function (e, text) {
        $result.text('Event: search.bs.table');
    });
});