Problem mit Responsive DataTables Und Bootstrap Tabs

Will ich mit Datatables und Reaktionsschnell Erweiterung im inneren Bootstrap-Tabs. Ich habe diese arbeiten separat.

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

Sehen Sie das Problem, hier

  • Ich kann nicht sehen, was das problem ist, könnten Sie erklären, ein wenig mehr?
  • Ja, natürlich. Es gibt zwei Tabellen: eine im zweiten tab und andere am unteren Rand (außerhalb der tabs). Unteren Tabelle funktioniert gut, wenn Sie Fenster vergrößern, Tabelle der Registerkarte nicht.
  • Sie können finden Sie unter hier eine datatable reaktionsschnell Weg
InformationsquelleAutor Lubco | 2015-09-21
  1. 28

    URSACHE

    Gibt es mehrere Probleme mit deinem code:

    1. Bootstrap-Bibliothek enthalten ist, bevor die jQuery-Bibliothek
    2. API-Methode responsive.recalc() ist in dataTables.responsive.js seit 1.0.1 Sie sind einschließlich version 1.0.0.
    3. Event-handler sollten angebracht werden, wenn das DOM verfügbar ist.

    LÖSUNG

    1. Enthalten Bootstrap-Bibliothek nach der jQuery-Bibliothek

    2. Gehören Reaktionsschnell Weg Erweiterung mit der version 1.0.1 oder später

    3. Verwenden Sie den folgenden code:

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

    Sehen aktualisiert jsFiddle für code und demonstration.

    LINKS

    Sehen jQuery-DataTables – Spaltenbreite Probleme mit Bootstrap tabs für die Lösung der häufigsten Probleme mit jQuery-DataTables-und Bootstrap-Tabs.

    • Danke Gyrocode. Ich dachte, dass da unten in der Tabelle wurde der Arbeit von Ressourcen gültig waren... Es waren OK, in meinem richtigen code... aber ich hatte auch noch andere Fehler in meinem javascript-Aufruf anpassen () - Funktion
    InformationsquelleAutor Gyrocode.com
  2. 0

    Ich habe versucht, die oben genannten Antworten aber keiner arbeitete. Ich wurde mit JQuery-Schritte-Assistenten als Registerkarten. Ich musste $('#datatable').css("width", '100%') als gut für Sie zu arbeiten.

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

    Meine Datatable ist auf der 3. Registerkarte, damit die Prüfung auf die currentIndex.

    InformationsquelleAutor Edu
Schreibe einen Kommentar