Bootstrap Table

by jimkennelly

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>
<table id="dataTable">
  <thead>
    <tr>
      <th data-field="name">Name</th>
      <th data-field="stargazers_count">Stars</th>
      <th data-field="forks_count">Forks</th>
      <th data-field="description">Description</th>
    </tr>
  </thead>
</table>

JavaScript

var useGoodURL = true;
var goodUrl = "https://api.myjson.com/bins/omz7e";
var badUrl = "https://api.myjson.com/bins/omz7eBAD";

$table = $("#dataTable");
$table.bootstrapTable({
  url: (useGoodURL ? goodUrl : badUrl),
  onLoadSuccess: function loadedOk(data) {
    alert("good rows loaded ok:" + data.length);
    localStorage.setItem('localData', JSON.stringify(data));

  },
  onLoadError: function loadedError(status, res) {
    alert("error occurred - using local storage");
    $table.bootstrapTable({
      data: localStorage.getItem('localData'),

    });

  },

})


var beforePrint = function() {
  console.log('Functionality to run before printing.');
};
var afterPrint = function() {
  console.log('Functionality to run after printing');
};

if (window.matchMedia) {
  var mediaQueryList = window.matchMedia('print');
  mediaQueryList.addListener(function(mql) {
    if (mql.matches) {
      beforePrint();
    } else {
      afterPrint();
    }
  });
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;