Bootstrap Table Add Update Delete

by Phil

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 id="myTable">

  <table id="table">
    <thead>
      <tr>
        <th data-field="id" data-formatter="formatUpdate">Update</th>
        <th data-field="id" data-formatter="formatDelete">Delete</th>
        <th data-field="id">id</th>
        <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>
        <th data-field="source">Source</th>

      </tr>
    </thead>
  </table>


  <a class="btn btn-default btnAddDeleteUpdate" data-id="5">Add</a>
  <a class="btn btn-danger btnSave">Save</a>

</div>

JavaScript

var originalData;
var deletedData;
var insertedData;
var updatedData;


$(function() {
  $('#table').bootstrapTable({
    url: 'https://api.myjson.com/bins/tpju3',
    uniqueId: 'id',


  }).on('load-success.bs.table', function(e, data) {
    var d = $('#table').bootstrapTable('getData');
    originalData = d.slice();
    
    //alert('Original rows loaded:' + originalData.length);
    // debugger;
     

  })
  $("#myTable").on('click', '.btnSave', function() {
   // alert('Original :' + JSON.stringify(originalData));
   // alert('Current data  :' + JSON.stringify($("table").bootstrapTable('getData')));
 //debugger;
 
    var currentData = $("table").bootstrapTable('getData');

// deleted items
var props = ['id'];
var result = originalData.filter(function(o1){
    // filter out (!) items in result2
    return !currentData.some(function(o2){
        return o1.id === o2.id;          // assumes unique id
    });
}).map(function(o){
    // use reduce to make objects with only the required properties
    // and map to apply this to the filtered array as a whole
    return props.reduce(function(newo, name){
        newo[name] = o[name];
        return newo;
    }, {});
});
alert('Deleted items = ' + JSON.stringify(result));


result = currentData.filter(function(o1){
    // filter out (!) items in result2
    return !originalData.some(function(o2){
        return o1.id === o2.id;          // assumes unique id
    });
}).map(function(o){
    // use reduce to make objects with only the required properties
    // and map to apply this to the filtered array as a whole
    return props.reduce(function(newo, name){
        newo[name] = o[name];
        return newo;
    }, {});
});

alert('Inserted items = ' + JSON.stringify(result));




	
    // need to put the delete, updated and inserted filters here

  });

  $("#myTable").on('click', '.btnAddDeleteUpdate', function() {
    console.log($(this).text());

    switch ($(this).text()) {
      case 'Add':
        var newRow...