twitter-bootstrap 响应式数据表和引导标签的问题

Issue with Responsive DataTables And Bootstrap Tabs

提问by Lubco

I want to use Datatables and Responsive extension inside Bootstrap Tabs. I have this working separately.

我想在 Bootstrap 标签中使用数据表和响应式扩展。我有这个单独工作。

$(document).ready(function() {
    $('#example').DataTable( {
        responsive: true
    } );
    $('#exampleInTab').DataTable( {
        responsive: true
    } );
} );

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

You can see the issue here

你可以在这里看到这个问题

回答by Gyrocode.com

CAUSE

原因

There are multiple issues with your code:

您的代码存在多个问题：

1. Bootstrap library is included before jQuery library
2. API method responsive.recalc()is available in dataTables.responsive.jssince 1.0.1, you're including version 1.0.0.
3. Event handler should be attached once DOM is available.

1. Bootstrap 库包含在 jQuery 库之前
2. API 方法responsive.recalc()在 中可用，dataTables.responsive.js因为1.0.1您包含了 version 1.0.0。
3. 一旦 DOM 可用，就应该附加事件处理程序。

SOLUTION

解决方案

1. Include Bootstrap library after jQuery library

2. Include Responsiveextension version 1.0.1 or later

3. Use the code below:

   $(document).ready(function () {
       $('#example').DataTable({
           responsive: true
       });
   
       $('#exampleInTab').DataTable({
           responsive: true
       });
   
       $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
           $($.fn.dataTable.tables(true)).DataTable()
              .columns.adjust()
              .responsive.recalc();
       });    
   });
   

1. 在 jQuery 库之后包含 Bootstrap 库

2. 包括响应式扩展版本 1.0.1 或更高版本

3. 使用下面的代码：

   $(document).ready(function () {
       $('#example').DataTable({
           responsive: true
       });
   
       $('#exampleInTab').DataTable({
           responsive: true
       });
   
       $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
           $($.fn.dataTable.tables(true)).DataTable()
              .columns.adjust()
              .responsive.recalc();
       });    
   });
   

DEMO

演示

See updated jsFiddlefor code and demonstration.

有关代码和演示，请参阅更新的 jsFiddle。

LINKS

链接

See jQuery DataTables – Column width issues with Bootstrap tabsfor solution to the most common problems with jQuery DataTables and Bootstrap Tabs.

请参阅jQuery DataTables – Bootstrap 选项卡的列宽问题，了解 jQuery DataTables 和 Bootstrap 选项卡的最常见问题的解决方案。

回答by Edu

I tried the answers above but none worked. I was using JQuery Steps Wizard as tabs. I had to use $('#datatable').css("width", '100%')as well for it to work.

我尝试了上面的答案，但没有一个奏效。我使用 JQuery 步骤向导作为选项卡。我也必须使用$('#datatable').css("width", '100%')它才能工作。

wizard.steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            enableFinishButton: false,
            enablePagination: false,
            enableAllSteps: true,
            titleTemplate: "#title#",
            cssClass: "tabcontrol",
            onStepChanged: function (event, currentIndex, priorIndex) {

                if (currentIndex == 2) {
                    $('#datatable').css("width", '100%')
                    $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
                }
            }
        })

My Datatable is on the 3rd tab hence the check on the currentIndex.

我的数据表位于第三个选项卡上，因此检查currentIndex.