响应数据表和引导选项卡的问题 [英] Issue with Responsive DataTables And Bootstrap Tabs

问题描述

我想在Bootstrap标签中使用Datatables和Responsive扩展。我有这个工作分开。

  $（document）.ready（function（）{
 $（'＃example '）.DataTable（{
 respond：true 
}）; 
 $（'＃exampleInTab'）。DataTable（{
 respond：true 
}）; 
}）; 
 
 $（'a [data-toggle =tab]'）on（'shown.bs.tab'，function（e）{
 $（$。fn.dataTable .tables（true））。DataTable（）
 .columns.adjust（）
 .responsive.recalc（）; 
}）; 
  

您可以看到问题这里

解决方案

原因

您的代码的问题：

1. 引导库包含在jQuery库之前


2. API方法 respond.recalc（）在 dataTables.responsive.js 中可用，因为 1.0.1 ，你包括版本 1.0.0 。


3. 一旦DOM可用，就应该附加事件处理程序。 >
   

解决方案

1. 包含Bootstrap库jQuery库




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




3. 使用以下代码：

     $（document）.ready（function（）{
    $（'＃example'）。DataTable（{
    respond：true 
   }）; 
    
    $（'＃exampleInTab'）。DataTable（{
    respond：true 
   }）; 
    
    $（'a [data-toggle =tab]'）on（'shown.bs.tab'，function（e）{
    $（$。fn.dataTable .tables（true））。DataTable（）
    .columns.adjust（）
    .responsive.recalc（）; 
   }）; 
   }）; 
     

演示

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

LINKS

请参阅 jQuery DataTables - 使用引导选项卡的列宽度问题解决了jQuery DataTables和Bootstrap选项卡中最常见的问题。

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

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

解决方案

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.js since 1.0.1, you're including version 1.0.0.
3. Event handler should be attached once DOM is available.

SOLUTION

1. Include Bootstrap library after jQuery library

2. Include Responsive extension 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();
       });    
   });
   

DEMO

See updated jsFiddle for code and demonstration.

LINKS

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

这篇关于响应数据表和引导选项卡的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！