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" />

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}]};

  $('#skillTable').DataTable({
    autoWidth: false,
    processing: true,
    serverSide: false,
    order: [[0, "asc"]],
    data: d.data,
    columns: d.columns
  });

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

  //adding the second header row breaks the sort
  var header = $('#skillTable').find('thead');
  header.html(topheaders + header.html())
});