JQuery Tabs and DataTables

Question

I am stumped. I have three tabs for three years worth of data (2106, 2015, 2014). When the user visits the page, they should see the 2016 data first, then be able to click on the '2015' tab and see 2015 data, and the same for 2014. Each dataTable has the same structure (region, enrollments, unique) but obviously the numbers change because there are different results for each year.

So far, I've been able to render the data for 2016. I can also fire an event each time I click the 2015 and 2014 tabs so I know those tabs are active.

But, the table never renders the data appropriate for each year - it always shows 2016 data.

Sorry, new to JQuery UI tabs - I suspect it has more to do with JQuery and less with the dataTables themselves but after hacking around and searching for solutions on the Internet, I can't seem to wrap my head around a solution.

As always, thanks in advance.

Here's what I have so far on the HTML side:

 <ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#tab-table-2016" data-toggle="tab">2016</a>
        </li>
        <li>
            <a href="#tab-table-2015" data-toggle="tab">2015</a>
        </li>
        <li>
            <a href="#tab-table-2014" data-toggle="tab">2014</a>
        </li>
    </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-pane-2016">
                        <table id="2016-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>Region</th>
                                    <th>Unique </th>
                                    <th>Enrollments</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab-pane-2015">
                        <table id="2015-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>Region</th>
                                    <th>Unique </th>
                                    <th>Enrollments</th>
                                </tr>
                            </thead>
                        </table>

                        <div class="tab-pane" id="tab-pane-2104">
                        <table id="2014-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>Region</th>
                                    <th>Unique </th>
                                    <th>Enrollments</th>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </div>
                    </div>

And then this on the jscript side:

$(document).ready(function() {
 $($.fn.dataTable.tables(true)).DataTable() 
    .columns.adjust();
  $('#2016-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"}

    ]

} );
});
     $(document).ready(function() { 
     $('a[href=\"#tab-table-2014\"]').on( 'shown.bs.tab', function (e) {

      console.log('hi 2014');



      $('#2014-table').DataTable().clear().destroy();

       $($.fn.dataTable.tables(true)).DataTable().columns.adjust();

     $('#2014-table').dataTable( {

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

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

    ]

} );

  });


     }); 

  $('a[href=\"#tab-table-2015\"]').on( 'shown.bs.tab', function (e) {
      console.log('hi 2015');
});

---

Updated code:

Changed 'tab-table-' to 'tab-pane' and removed the 'tab-content' wrapper

 <ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#tab-pane-2016" data-toggle="tab">2016</a>
        </li>
        <li>
            <a href="#tab-pane-2015" data-toggle="tab">2015</a>
        </li>
        <li>
            <a href="#tab-pane-2014" data-toggle="tab">2014</a>
        </li>
    </ul>

Then on the js, changed the href from

$('a[href=\"#tab-table-2014\"]').on( 'shown.bs.tab', function (e) {

to

$('a[href=\"#tab-pane-2014\"]').on( 'shown.bs.tab', function (e) {

for all the years

Answer 1

Remove the <div class="tab-content"> wrapper, and change

    <li class="active">
        <a href="#tab-table-2016" data-toggle="tab">2016</a>
    </li>
    <li>
        <a href="#tab-table-2015" data-toggle="tab">2015</a>
    </li>
    <li>
        <a href="#tab-table-2014" data-toggle="tab">2014</a>
    </li>

to:

    <li class="active">
        <a href="#tab-pane-2016" data-toggle="tab">2016</a>
    </li>
    <li>
        <a href="#tab-pane-2015" data-toggle="tab">2015</a>
    </li>
    <li>
        <a href="#tab-pane-2014" data-toggle="tab">2014</a>
    </li>

I'd suggest changing the quotes in your selectors like so:

$("a[href='#tab-pane-2014']").on( 'shown.bs.tab', function (e) {

But I think the real issue here that you are missing the closing div tag for #tab-pan-2015. Fix your indentation you'll see what I mean.