DataTable + Bootstrap 4 Tooltips funktioniert nicht mit DataTable paging...

[preqi]

Ich habe ein DataTable mit Bootstrap 4. Auf bestimmte Elemente habe ich ein Tooltip gesetzt:

Dieses Bootstrap Tooltip funktioniert ab Eintrag 11 nicht mehr. Tooltip ist immer noch da, aber nicht als Bootstrap, sondern Standart. Es ist egal ob ich auf Seite 2 wechsle oder mehr Einträge pro Seite einstelle; ab dem 11 Eintrag geht es nicht mehr...

Hat jemand eine Idee wie man das beheben könnte?
Außerdem grübel ich gerade noch daran, wie man die Background-Farbe der Paging Buttons (unten rechts) verändern kann. Falls jemand dazu auch eine Idee hat, wäre ich sehr dankbar

 

[pcBauer]

Hey,
Das hängt wohl damit zusammen, dass die bootstrap tooltip über eine Zeile jquery initialisiert werden, aber nur nach dem ersten Laden der Seite. Da sind dann nur die ersten 10 Einträge und somit auch nur die ersten 10 tooltips definiert, wechselst du die Seite musst du die nativen tooltips eben wieder mit dem gleichen Code initialisieren.
Wie du das am geschicktesten machst hängt von deiner datatable ab.
Welche Bibliothek benutzt du denn?

 

[preqi]

Hi, danke für deine Hilfe!

<!--JS jQuery-->
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<!--JS DataTable-->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<!--JS DELIVR-->
<script async src="https://cdn.jsdelivr.net/npm/perfops-rom"></script>

<!--JS Bootstrap-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

<!--CSS Bootstrap-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!--CSS Datatable-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

Das hier ist alles was ich aufrufe...
Und das hier ist mein DataTable JS:

Es ist so, dass ich keine stumpfe html-Tabelle geschrieben habe. Jede Zeile wird aus einer Datenbank generiert. Also habe ich im html eine foreach schleife mit einem td. Auf den Inhalt des td lege ich bootstrap 4:

Wie kann ich jquery jedesmal neu initialisieren wenn das dataTable sich ändert?

 

[pcBauer]

Es gibt auch einen Code-Tag, dann muss man sich nicht mit Bildern behelfen (sogar mit Syntax-Highlighting 😎).

War mir nicht klar, ob du von DataTables allgemein redest (andere Libs schimpfen ihre Tabellen auch schlicht DataTables) oder eben von datatables.net .

Du müsstest wohl einfach auf das "draw"-Event hören, es gibt zwar auch ein "page"-Event, aber das fliegt schon bevor gerendert wird, deshalb wenig zielführend:
https://datatables.net/reference/event/draw

Und dann eben auf das Event die angesprochene Initialisierung der Tooltips, die du ja schon irgendwo haben dürftest.

var table = $('#example').DataTable();
table.on( 'draw', function () {
  $('[data-toggle="tooltip"]').tooltip();
});

 

[preqi]

Danke für deine Hilfe! Jetzt läuft alles wunderbar. Aber, wenn ich NUR das draw-Event hinzufüge, dann ist genau das Gegenteil der Fall. Bei dem ersten Laden der Seite werden keine Bootstrap Tooltips angezeigt. Sondern erst wenn ich eben einmal das "paging" benutze und die Tabelle neu lade. Deshalb habe ich, wie unten gezeigt, das draw-Event hinzugefügt und die alte Initialisierung des Tooltips behalten. Diese sorgt dafür dass es auch beim ersten Laden der Seite funktioniert!

 var table = $("#jobTabelle").DataTable({
            "pagingType": "simple_numbers",
            "orderClasses": false,
            'stripeClasses': ['stripe1', 'stripe2'],
            "fixedHeader": true,
            "scrollY": 600,
            "scrollCollapse": true,
            "scrollX": true,
            "paging": true,
            "ordering": false,
            "info": true,
            "language": {
                "zeroRecords": "Keine Treffer.",
                "search": "Suchen:",
                "searchPlaceholder": "...filtern nach",
                "info": "Seite _PAGE_ von _PAGES_",
                "infoEmpty": "0 Einträge gefunden.",
                "infoFiltered": "(gefiltert aus _MAX_ Einträgen)",
                "lengthMenu": "_MENU_ Einträge pro Seite",
                "paginate": {
                    "previous": "Letzte",
                    "next": "Nächste",
                    "first": "Erste",
                    "last": "Letzte",
                }
            },
        });

            table.on('draw', function () {
                $('[data-toggle="tooltip"]').tooltip({ container: 'body' });
            });

        $(document).ready(function () {
                $('[data-toggle="tooltip"]').tooltip({ container: 'body' });
            });

 

[pcBauer]

Da sind dann nur die ersten 10 Einträge und somit auch nur die ersten 10 tooltips definiert, wechselst du die Seite musst du die nativen tooltips eben wieder mit dem gleichen Code initialisieren.

Das meinte ich mit "wieder mit dem gleichen Code initialisieren" 😉.
Schön, dass es jetzt klappt :-) .