Tabs in bootstrap to load multiple tables

tomish

Hi, I have 3 tabs for 2016, 2015, and 2014. When a user enters the site for the first time, the 2016 data loads in the first visible table. Then, when they click on the 2015 tab, data from 2015 loads, and so on. The data has the same structure for every year.

So far, I've been able to get the 2016 data to load for the initial view. But I am struggling to get the tabs for 2015 and 2014 to work. I thought I could fire an event when a user clicked on my year tab (below, named 'tab-table-2015') but I can't even get the alert to fire.

Any guidance/help is much appreciated!

$(document).ready(function() {

     $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
   } );


  $('table.table').DataTable( {

         'dom': 'Bfrtip',
                 'buttons': ['copy', 'csv', 'excel', 'pdf', 'print'],
         'bFilter': false,
         'scrollCollapse': true,
                    'paging':         false,

       "ajax": {
          "url": "cc/data/ind_sessions_table_test.php",
          "dataSrc": ""
    },
      "columns": [
        { "data": "region"},
        { "data": "2015.unique_enr"},
        { "data": "2015.enrollments"}

       ]

   } );

        $('tab-table-2015').click(function() {

            alert ('you clicked 2015');
    }

  );

 });

jr42.gordon

What is 'tab-table-2015' on line 29? Class? ID? It isn't declared as anything.