jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>

<table cellpadding="0" cellspacing="0" border="0" class="table" id="skillTable" >
<thead/>
</table>

JavaScript

$(document).ready(function () {

	//normally from an api call, configured by user selections on the page
	var d = { columns: [{title: "col1"},  {title: "col2"}, {title: "col3"}, {title: "col4"} ], data: [["r1c1", "r1c2", "r1c3", "r1c4"], ["r2c1", "r2c2", "r2c3", "r2c4"], ["r3c1", "r3c2", "r3c3", "r3c4"]], topHeaders: [{title: "group1", width: 2}, {title: "group2", width: 2}]};



  var topheaders = "<tr role=\"row\">";
  d.topHeaders.forEach(function (element) {
    topheaders += "<th colspan =\"" + element.width + "\" >" + element.title + "</th>";
  });
  topheaders += "</tr>";
  
    var botheaders = "<tr role=\"row\">";
  d.columns.forEach(function (element) {
    botheaders += "<th>" + element.title + "</th>";
  });
  botheaders += "</tr>";

  //adding the second header row breaks the sort
  var header = $('#skillTable').find('thead');
  header.html(topheaders + botheaders +  header.html())
  
    $('#skillTable').DataTable({
    autoWidth: false,
    processing: true,
    serverSide: false,
    order: [[0, "asc"]],
    data: d.data,
    columns: d.columns
  });
});