jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.7.1/js/dataTables.searchBuilder.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.5.2/css/dataTables.dateTime.min.css">
<html>

  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title></title>
  </head>

  <body>
    <table class="table table-flush no-action-column display-none" id="example">
      <thead>
        <tr>
          <th data-orderable="false"><br>
          </th>
          <th data-orderable="false" class="text-center filter job-no">Job No.</th>
          <th data-orderable="false" class="text-center filter customer">Customer</th>
          <th data-orderable="false" class="text-center">Description</th>
          <th data-orderable="false" class="text-center filter dept multi">Dept</th>
          <th data-orderable="false" class="text-center">FAB/Hrs</th>
          <th data-orderable="false" class="text-center">WRM/Hrs</th>
          <th data-orderable="false" class="text-center filter quote">Quote</th>
          <th data-orderable="false" class="text-center">Latest Comment</th>
          <th data-orderable="false" class="text-center">Delivery</th>
          <th data-orderable="false" class="text-center filter location multi">Location</th>
          <th data-orderable="false" class="text-center filter status" data-list-name="jobstatus">Status</th>
          <th data-orderable="false" class="text-center filter po-number">PO
            Number</th>
          <th data-orderable="false" class="text-center">WP Issued</th>
          <th data-orderable="false" data-visible="false" class="text-center is-on-screen">On Screen</th>
          <th data-orderable="false" data-visible="false" class="text-center has-client-contacted">Client Contact</th>
          <th...

CSS

body {
  font-family: Arial;
}

JavaScript

$('#example').dataTable({
  "language": {
    "search": "Filter"
  },
  "pageLength": 100,
  /* scroller: true,
  scrollX: true,
  scrollY: 550, */
  order: [], // No default order, show the rows as they're inserted
  dom:
    "<'jobs-dashboard-container'" +
    "<'row'<'col-sm-12'<Bf>>>" + 
    "<'row'<'col-sm-3'<i>><'col-sm-9'p>>" + 
    "t" + 
    "<'row'<'col-sm-12'p>>" +
    ">",
  searchBuilder: {
    preDefined: {
      "criteria": [
        {
          "data": "Location",
          "condition": "=",
          "value": [
            "DRAFTING"
          ]
        },
        {
          "data": "Drafter",
          "condition": "=",
          "value": ["0004"]
        },
      ],
      "logic": "AND"
    }
  },
});