Die sehr hilfreiche JS Komponente "bootstrap-table" arbeitet mit Events, welche bei diversen Aktionen des Benutzers ausgelöst werden. Für den Entwickler kann es dabei jedoch sehr schwer sein, in einem Event die Eltern-Komponente ("Parent-Element") der Tabelle zu erhalten. Funktionen wie "$(this)" usw. liefern jeweils nur die Referenz auf die bootstrapTable ohne Referenz auf das Hauptelement.
Beispiel:
<table id="myTable" class="table table-striped"></table>
Diese Tabelle wird nun (nach Einbinden diverser benötigter Dateien zum bootstrapTable umgewandelt:
$("#myTable").bootstrapTable({ ... });Um jetzt bei einem Event auf das "myTable" Element zugreifen zu können, muss man (leider) den Quellcode der Komponente anpassen. Wir nehmen als Beispiel das Event "onPageChange".
Bearbeiten Sie die Datei "bootstrap-table.js":
Suchen Sie dort nach folgender Zeile (ca. 3200)
onPageChange: function onPageChange(number, size) {und ergänzen Sie die Zeile wie folgt:
onPageChange: function onPageChange(number, size, element) {Die zweite Änderung erfolgt unterhalb (ca. Zeile 5200 bis 5300):
Hier ergänzen Sie die folgende Zeile
this.trigger('page-change', this.options.pageNumber, this.options.pageSize);wie folgt:
this.trigger('page-change', this.options.pageNumber, this.options.pageSize, this.$el);Fertig. Bitte speichern Sie die geänderte Datei ab.
Wenn Sie jetzt den Event abfangen, dann erhalten Sie einen dritten Parameter:
onPageChange: function(number, size, element) { console.log(element.attr("id"));
})Das liefert dann die ID des Hauptelementes zurück:
myTable
