响应式数据表和引导标签的问题 [英] Issue with Responsive DataTables And Bootstrap Tabs

问题描述

我想在 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();
});

您可以在此处

推荐答案

CAUSE

您的代码存在多个问题:

CAUSE

There are multiple issues with your code:

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

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.

解决方案

1. 在 jQuery 库之后包含 Bootstrap 库

1. Include Bootstrap library after jQuery library

包括 Responsive 扩展版本 1.0.1 或更高版本

Include Responsive extension version 1.0.1 or later

使用以下代码:

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

演示

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

参见 jQuery DataTables – 列宽问题Bootstrap 选项卡，用于解决 jQuery DataTables 和 Bootstrap 选项卡的最常见问题.

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

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