jQuery DataTables – Row selection using checkboxes

Example for article at http://www.gyrocode.com/articles/jquery-datatables-checkboxes/

HTML

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.1.0/js/dataTables.checkboxes.min.js"></script>
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.1.0/css/dataTables.checkboxes.css">
<table id="example" class="datatable table striped hovered cellhovered border bordered" cellspacing="0">
   <thead>
      <tr>
         <th></th>
         <th>SFA Id</th>
         <th>SFA/KPM</th>
         <th>SC</th>
         <th>Goal Id</th>
         <th>Goal</th>
         <th>Obj Id</th>
         <th>Obj</th>
         <th>Desc</th>
         <th>Responsible Party</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td>2</td>
         <td>Customer and Market Focus</td>
         <td>Human Resource Focus</td>
         <td>21757</td>
         <td>MyGoal</td>
         <td>21758</td>
         <td>1.1 </td>
         <td>MyDesc</td>
         <td>John Doe</td>
      </tr>
      <tr>
         <td></td>
         <th>2</th>
         <td>Customer and Market Focus</td>
         <td>Measurement, Analysis, and Knowledge Management</td>
         <th>21757</th>
         <td>MyGoal</td>
         <th>21758</th>
         <td>1.1 </td>
         <td>MyDesc</td>
         <td>John Doe</td>
      </tr>
      <tr>
         <td></td>
         <th>2</th>
         <td>Customer and Market Focus</td>
         <td>Organizational Performance Results</td>
         <th>21757</th>
         <td>MyGoal</td>
         <th>21758</th>
         <td>1.1 </td>
         <td>MyDesc</td>
         <td>John Doe</td>
      </tr>
      <tr>
         <td></td>
         <th>2</th>
         <td>Customer and Market Focus</td>
         <td>Customer &amp; Market Focus</td>
         <th>21978</th>
         <td>MyGoal</td>
         <th>21979</th>
         <td>2.1 </td>
        ...

JavaScript

var objTbl;
  $(document).ready(function() {
      objTbl = $('#example').DataTable({
          columnDefs: [{
                  targets: 0,
                  data: function(row, type, val, meta) {
                  
                    if (type === 'display') {
      			 					 return '';
    						  }
                  //console.log(row);
					  // This one works 
					  var myData1 = row[1] + ":" + row[4];
					  // The string below will NOT render spacing correctly 
					  var myData2 = row[1] + ":" + row[4] + ":" + row[3] + ":" + row[6];
					  // The string below will NOT render spacing correctly 
					  var myData3 = row[1] + ":" + row[4] + ":" + row[6];
					  return myData3;
                  },
                  'checkboxes': {
                      'selectRow': true
                  }
              },
              {
                  "visible": false,
                  "targets": [1, 3, 4, 6]
              }
          ],
          select: {
              style: 'multi'
          },
          order: [
              [3, 'asc']
          ],
          iDisplayLength: 5,
          lengthMenu: [5, 10, 15, 20],
          bInfo: false,
          drawCallback: function() {
              var api = this.api();
              var rows = api.rows({
                  page: 'current'
              }).nodes();
              var last = null;

              // For each group, insert a row for hidden column SC
              api.column(3, {
                  page: 'current'
              }).data().each(function(group, i) {
                  if (last !== group) {
                      $(rows).eq(i).before(
                          '<tr class="group"><td colspan="9">' + group + '</td></tr>'
                      );
                      last = group;
                  }
              });
          }
      });
  });