jQuery Data Tables

Change class name on click in jQuery

by rdenver6

HTML

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<h2>
  Table Filters
</h2>
<div id="tableFilter">
  <div>
    Project Status
  </div>
  <div id="ProjectStatus"></div>
  <div>
    Project Owner
  </div>
  <div id="ProjectOwner">

  </div>
</div>
<table id="example" class="display" style="width:100%">
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

JavaScript

var dataSet = [];
var listItemUrl = "foo";
var project = {
  costCat: "Cost Avoidance",
  location: "",
  owner: "",
  ownerEmail: "",
  projectId: "2",
  projectName: "test item 1",
  savings: "$60,000",
  spendCat: "Capital Expenditure",
  spendSubCat: "Capital Equipment",
  spendType: "Freight/Logistics",
  status: "Conceptual"
};
dataSet.push(project);
var project = {
  costCat: "P&L Impact",
  location: "",
  owner: "Robin DiCicco",
  ownerEmail: "[email protected]",
  projectId: "3",
  projectName: "project xz",
  savings: "$12,000",
  spendCat: "Contract Services",
  spendSubCat: "Assembly Services",
  spendType: "Raw/Direct Materials - Cogs",
  status: "Conceptual"
};
dataSet.push(project);
var project = {
  costCat: "P&L Impact",
  location: "",
  owner: "",
  ownerEmail: "",
  projectId: "4",
  projectName: "project abc",
  savings: "$10,320",
  spendCat: "Components",
  spendSubCat: "Bearings",
  spendType: "Repairs & Maintenance",
  status: "Conceptual"
};
dataSet.push(project);

$(document).ready(function() {
  $('#example').DataTable({
    columns: [{
        title: "Project Name",
        data: null,
        render: function(data, type, row) {
          return '<a href="' + listItemUrl + data.projectId + '">' + data.projectName + '</a>';
        }
      },
      {
        title: "Location Code",
        data: "location"
      },
      {
        title: "Project Status",
        data: "status"
      },
      {
        title: "Project Owner",
        data: null,
        render: function(data, type, row) {
          return '<a href="mailto:' + data.ownerEmail + '">' + data.owner + '</a>';
        }
      },
      {
        title: "Spend Type",
        data: "spendType"
      },
      {
        title: "Spend Category",
        data: "spendCat"
      },
      {
        title: "Spend Sub-category",
        data: "spendSubCat"
      },
      {
        title: "Cost Savings Category",
        data: "costCat"
      },
      {
        title: "12...