响应式数据表和引导选项卡的问题

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

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 – 列宽问题引导选项卡 用于解决 jQuery DataTables 和引导选项卡最常见的问题.

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

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