$(document).ready( function () {

​

            //ACCORDION CLICK

            var elements = document.getElementsByClassName("usa-accordion__button");

            for (var i = 0; i < elements.length; i++) {

                elements[i].addEventListener("click", toggleAccordion, false);

            }

​

  function toggleAccordion() {

            var elements = document.getElementsByClassName("usa-accordion__content");

            for (var i = 0; i < elements.length; i++) {

                elements[i].setAttribute("hidden","");

            }

​

            var expanded = this.getAttribute("aria-expanded");

            if (expanded == "false") {

                this.scrollIntoView({behavior: "smooth" , block: "start", inline: "nearest"});

            }

        }

​

  //Init the individual training datatable

  $("#coursesTable").DataTable({

    responsive: true,

        "ajax": "/ajax/objects.txt",

        "columns": [

            { "data": "name" },

            { "data": "position" },

            { "data": "office" },

            { "data": "extn" },

            { "data": "start_date" },

            { "data": "salary" },

            { "data": "extn" },

            { "data": "start_date" },

            { "data": "salary" }

        ],

​

    columnDefs: [

      {"className": "tblcellNoWrap", "targets": 0},

      {"className": "none", "targets": [1,4,5,6,7,8]},

      //{"searchable": false, "targets": [2,3,4,5,6,7]},

      {"responsivePriority": 1, "targets": 0}

    ],

    order: [[1, "asc"]],

    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],

    initComplete: function () {

      //Populate the select input field with unique occurences of column data

      this.api().columns([2,3]).every( function () {

        var column = this;

        var select = $("<select id=`selIndvTrngFltr-" + column.index() + "`><option value=>Select All</option></select>")

        .appendTo( $("#indvTrngFltr-" + column.index()) )

        //.appendTo( $(column.footer()).empty() )

        .on( "change", function () {

          var val = $.fn.dataTable.util.escapeRegex(

            $(this).val()

          );

          var colid = this.parentElement.id.split("-")[1];

          if( colid == 1) {

            column

            .search( this.value )

            .draw();

            var searchTermJob = this.value;

            $(".linkJobSearch").attr("href", function(i, val) {return val.substr(0, val.lastIndexOf("=") + 1) + searchTermJob;});

          }

          else {

            column

            .search( val ? "^" + val + "$" : "", true, false )

            .draw();

          }

        });

​

        column.data().unique().sort().each( function ( val, j ) {

          var dispVal = "";

          //If the value has an `;`, it is from the Target Audience column and needs to be split

          if(val.indexOf(";") > 0) {

            //Split on the semicolon to get all of the items

            var arrItems = val.split(";");

​

            for (var i = 0;i < arrItems.length - 1;i++) {

              if(arrItems[i]) {

                dispVal = arrItems[i];

                if(arrTrgtAud) {

                  var a = arrTrgtAud.indexOf(dispVal);

                  if(a == -1) {

                    select.append("<option value=" + dispVal + ">" + dispVal + "</option>");

                    arrTrgtAud[j] = dispVal;

                    j = j++;

                  }

                } else {

                  select.append("<option value=" + dispVal + ">" + dispVal + "</option>");

                  arrTrgtAud[j] = dispVal;

                  j = j++;

                }

              }

            }

          } else {

            if(val.indexOf("<") == 0){

              val = val.substring(val.indexOf(">") + 1, val.lastIndexOf("<"));

            }

​

            if(val.length > 30){

            dispVal = val.substring(0,30) + "...";

                               } else {

                                 dispVal = val;

                               }

​

            if(dispVal) {

              select.append("<option value=" + val + ">" + dispVal + "</option>");

            }

          }

        });

      });

    }

  });

  $('button').on('click', function () {

    $("#coursesTable").DataTable().column(2).search('Tokyo').draw()

  })

​

} );

​