jQuery addClass example

Change class name on click in jQuery

by crashvector

HTML

<html>

  <head>
    <script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/sl-1.3.0/datatables.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/sl-1.3.0/datatables.min.js"></script>
  </head>

</html>

<body>
  <div class="container">
    <table id="samples" class="display nowrap compact hover dt-left" width="100%"></table>
    </table>
    </form>
</body>

CSS

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/sl-1.3.0
 *
 * Included libraries:
 *   JSZip 2.5.0, DataTables 1.10.18, Buttons 1.5.6, Column visibility 1.5.6, HTML5 export 1.5.6, Print view 1.5.6, Select 1.3.0
 */

table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold
}

table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111
}

table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none
}

table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #111
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  *cursor: hand;
  background-repeat: no-repeat;
  background-position: center right
}

table.dataTable thead .sorting {
  background-image: url("DataTables-1.10.18/images/sort_both.png")
}

table.dataTable thead .sorting_asc {
  background-image: url("DataTables-1.10.18/images/sort_asc.png")
}

table.dataTable thead .sorting_desc {
  background-image: url("DataTables-1.10.18/images/sort_desc.png")
}

table.dataTable thead .sorting_asc_disabled {
  background-image: url("DataTables-1.10.18/images/sort_asc_disabled.png")
}

table.dataTable thead .sorting_desc_disabled {
  background-image: url("DataTables-1.10.18/images/sort_desc_disabled.png")
}

table.dataTable tbody tr {
  background-color: #ffffff
}

table.dataTable tbody tr.selected {
  background-color:...

JavaScript

$(document).ready( function () {
  var Category;
  var dataTable = $('#samples').DataTable({

    //Stops the Category variable from being filled until the table has loaded
    'initComplete': function(settings, json){
      categoryFill(settings, json);
    },
    'processing': true,
    'serverSide': false,
    'pageLength': -1,
    'lengthMenu': [
      [100, 250, 500, -1],
      [100, 250, 500, 'All']
    ],
    ajax: {
      url: 'https://api.myjson.com/bins/174mi0',
      dataSrc: ''
    },
    columns: [
      {
        //column to track what is selected and what isn't
        title: 'check-uncheck',
        data: '',
        defaultContent: '0',
        visible: false
      },
      {
        title: 'checkbox',
        visible: true,
        data: '',
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox',
        targets: 1,
        orderData: [0]
      },
      {
        title: 'ID',
        'className': 'dt-left',
        'visible': false,
        data: 'ID'
      },
      {
        title: 'Name',
        'className': 'dt-left',
        data: 'Name'
      },
      {
        title: 'Region/Program',
        'className': 'dt-left',
        data: 'Region'
      },
      {
        title: 'Class',
        'className': 'dt-left',
        data: 'Class'
      },
      {
        title: 'Category',
        'className': 'dt-left',
        data: 'Category'
      },
      {
        title: 'QC Concerns',
        'className': 'dt-left',
        data: 'QC_comment'
      }
    ],

    //creates a unique rowId by using the ID column from the database
    rowId: function(a) {
      return 'sampleid_' + a.ID;
    },

    select: {
      style: 'multi',
    },
    order: ([
      [5, 'asc'],
      [6, 'asc'],
      [4, 'asc']
    ]),
    orderFixed: [0, 'desc'],
    dom: '<Bif<t>ilp>',
    buttons: [
      {
        text: 'Select Default Library 1',
        action: function (dt) {
          deselectAll();
          defaultselect1 (dt);
 ...