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 Month Savings", data: "savings" }
      ],
      data: dataSet,
    "info": false,
      "ordering": false,
      "paging": false,
     ...