web-dev-qa-db-ja.com

レスポンシブDataTablesとBootstrap Tabs）の問題

Bootstrapタブ内でDatatablesとレスポンシブ拡張機能を使用したい。これを個別に機能させている。

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

あなたは問題を見ることができます ここ

javascripttwitter-bootstraptabsdatatables
11
Lubco

原因

コードには複数の問題があります。

  1. ブートストラップライブラリはjQueryライブラリの前に含まれています
  2. APIメソッドresponsive.recalc()はdataTables.responsive.jsで使用できます。1.0.1以降、バージョン1.0.0が含まれています。
  3. DOMが利用可能になったら、イベントハンドラーをアタッチする必要があります。

解決

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

デモ

コードとデモンストレーションについては、 更新されたjsFiddle を参照してください。

リンク

JQueryDataTablesおよびBootstrap Tabs）の最も一般的な問題の解決策については、 jQuery DataTables – Bootstrap tabs の列幅の問題）を参照してください。

28
Gyrocode.com

上記の答えを試しましたが、うまくいきませんでした。 JQueryステップWizardをタブとして使用していました。それを機能させるには、$('#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は3番目のタブにあるため、currentIndexをチェックします。

0
Edu