jQuery DataTables – How to add a checkbox column

Example for article at http://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/

by gangadharjannu

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/NicolasCARPi/jquery_jeditable@94c2880bc7f578f68e9f3d042de95ff309c64524/dist/jquery.jeditable.min.js"></script>
<button id="showEdited">show edited rows</button>
<button id="reset">Reset</button>
<br/>
<table id="example"></table>

JavaScript

$(document).ready(function() {
  var editedDataRows = {};
  createTable('example');

  $('#showEdited').on('click', function() {
    var editedRows = Object.keys(editedDataRows).map(function(value) {
      return editedDataRows[value];
    });
    alert(editedRows);
  });

  $('#reset').on('click', function() {
    destroyTable('example');
    createTable('example');
  })

  function createTable(tableId) {
    var columns = [{
      "title": "S.No"
    }, {
      "title": "Name"
    }, {
      "title": "Position"
    }, {
      "title": "Office"
    }, {
      "title": "Extn."
    }, {
      "title": "Start date"
    }, {
      "title": "Salary"
    }];
    return $('#' + tableId).DataTable({
      'ajax': 'https://api.myjson.com/bins/1us28',
      'columns': columns,
      'drawCallback': function(dtSettings) {
        var tableElement = $(dtSettings.oInstance);
        var tableInstance = $(dtSettings.oInstance).DataTable();
        $(tableElement.find('td')).editable(function(value, jeSettings) {
          // {row: , column: , columnVisible: }
          var rowColIndex = tableInstance.cell(this).index();
          var rowData = tableInstance.row($(this).closest('tr')).data().slice(0);
          rowData[rowColIndex.column] = value;
          editedDataRows[rowColIndex.row] = rowData;
          return value
        });
      }
    });
  }

  function destroyTable(tableId) {
    $('#' + tableId).DataTable().destroy();
    $('#' + tableId).empty();
  }
});