Bootstrap Table

by Ying Chor Ding

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-responsive">
  <table class="table table-striped jambo_table bulk_action table-credit">
    <thead>
      <tr class="headings">
        <th class="column-title">
          <input class="check-all" value="" type="checkbox"> All</th>
        <th class="column-title">Comapny</th>
        <th class="column-title">SAP No</th>
        <th class="column-title">Credit Limit</th>
        <th class="column-title text-center">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="even pointer">
        <td>
          <input class="first-checkbox" value="" type="checkbox">
        </td>
        <td>Company 1</td>
        <td>Supplier</td>
        <td>800,000,000</td>
        <td class="text-center">
          <a href="seller-view.html" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-check"></span>View</a>
          <a class="btn btn-primary btn-xs remove-row" type="button">Reomve</a>
        </td>
      </tr>
      <tr class="odd pointer">
        <td>
          <input class="first-checkbox" value="" type="checkbox">
        </td>
        <td>Company 2</td>
        <td>Supplier</td>
        <td>800,000,000</td>
        <td class="text-center">
          <a href="seller-view.html" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-check"></span>View</a>
          <a class="btn btn-primary btn-xs remove-row" type="button">Reomve</a>
        </td>
      </tr>
      <tr class="even pointer">
        <td>
          <input class="first-checkbox" value="" type="checkbox">
        </td>
        <td>Company 3</td>
        <td>Supplier</td>
        <td>800,000,000</td>
        <td class="text-center">
          <a href="seller-view.html" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-check"></span>View</a>
  ...

JavaScript

//Click on individual row
$('.remove-row').click(function(event) {
  $('input[type=checkbox]:checked').closest('tr.pointer').remove();
  event.stopPropagation();
});
$('.check-all').on('click', function() {
  $(this).closest('table').find('tbody :checkbox')
    .prop('checked', this.checked)
    .closest('tr').toggleClass('selected', this.checked);
});
//Click on button remove all
$('.btn-remove-all').click(function() {
  $('.table-credit input[type=checkbox]:checked').closest('tr.pointer').remove();
});