Bootstrap Table

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>
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/export/bootstrap-table-export.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/2.0.4/js/bootstrap-submenu.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/2.0.4/css/bootstrap-submenu.min.css">
<div class="col-sm-12">

    <div id="toolbar" class="btn-group">
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Actions</button>
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu dropdown-menu-right">
                <li><a tabindex="0">Annuler</a></li>
                <li><a tabindex="0">Sauvegarder</a></li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                    <a tabindex="0">Payer</a>

                    <ul class="dropdown-menu">
                      <li><a tabindex="0">Comptant</a></li>
                      <li><a tabindex="0">Débit</a></li>
                      <li><a tabindex="0">Carte de crédit</a></li>
                      <li><a tabindex="0">Carte cadeaux</a></li>
                      <li><a tabindex="0">Chèque</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>




  <table id="tableTest" data-pagination="true" data-side-pagination="server" data-height="300"...

JavaScript

//Fixed from issues 917 reference code
$('[data-submenu]').submenupicker();
$('#tableTest').bootstrapTable({
  url: "https://api.myjson.com/bins/tucu"
}).on('check.bs.table', function(e, row) {
  calculate();
  //$result.text('Event: check.bs.table, data: ' + JSON.stringify(row));
}).on('uncheck.bs.table', function(e, row) {
  //$result.text('Event: uncheck.bs.table, data: ' + JSON.stringify(row));
  calculate();
}).on('check-all.bs.table', function(e) {
  //$result.text('Event: check-all.bs.table');
  calculate();
}).on('uncheck-all.bs.table', function(e) {
  //$result.text('Event: uncheck-all.bs.table');
  calculate();
});

function TryParseInt(str, defaultValue) {
  var retValue = defaultValue;
  if (str != null) {
    if (str.length > 0) {
      if (!isNaN(str)) {
        retValue = parseInt(str);
      }
    }
  }

  return retValue;
}

tablechange = function() {
  var theTotal = 0;
  $("tr:not(:last-child) td:nth-child(2)").each(function() {
    theTotal += parseFloat($(this).html().replace(/[^0-9.]/g, ''));
  });
  $(".result").text(theTotal);
};

function calculate() {
  var totalPrice = 0;
  $("#tableTest tr").each(function() {
    $checkedBoxes = $this.find('input:checked');
    if ($checkedBoxes) {
      alert("allo");
    }
  });
}

function responseHandler(res) {
  //alert(res.totalElements + "-" + res.number + "-" + res.size);
  return {
    rows: res.content,
    total: res.totalElements,
    pageNumber: res.number,
    pageSize: res.size
  }
}

function totalTextFormatter(data) {
  return 'Total';
}

function sumFormatter(data) {
  field = this.field;
  var total_sum = data.reduce(function(sum, row) {
    return (sum) + (row[field] || 0);
  }, 0);
  return total_sum;
}

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  event.preventDefault();
  event.stopPropagation();
  $(this).parent().siblings().removeClass('open');
  $(this).parent().toggleClass('open');
});