jQuery选项卡和数据表

Question

我感到难过。 我有三个选项卡，用于显示三年的数据（2106、2015、2014）。 当用户访问页面时，他们应该首先查看2016年数据，然后能够单击“ 2015”标签并查看2015年数据，2014年也是如此。每个dataTable具有相同的结构（区域，注册，唯一）但显然数字会发生变化，因为每年会有不同的结果。

到目前为止，我已经能够渲染2016年的数据。每次单击2015和2014选项卡时，我也可以触发一个事件，因此我知道这些选项卡处于活动状态。

但是，该表格从不提供适合每年的数据-它始终显示2016年数据。

抱歉，JQuery UI选项卡的新功能-我怀疑它与JQuery的关系更大，而与dataTables本身的关系则更少，但是在黑客入侵并在Internet上搜索解决方案之后，我似乎无法将所有精力都放在解决方案上。

一如既往，在此先感谢。

到目前为止，这是我在HTML方面的内容：

 <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>

然后在脚本方面：

$(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');
});

---

更新的代码：

将'tab-table-'更改为'tab-pane'并删除了'tab-content'包装器

 <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>

然后在js上，将href更改为

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

至

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

多年来

Answer 1

删除<div class="tab-content">包装器，然后进行更改

    <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>

至：

    <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>

我建议像这样更改选择器中的引号：

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

但是我认为真正的问题是，您缺少#tab-pan-2015 div结束标记。 修正缩进，您会明白我的意思。