Verwenden der Bootstrap-Tabelle
Der erste Punkt: Die Bootstrap-Registerkarte ist einfach zu verwenden und ist Front-End-Paging (das heißt, es ist nicht erforderlich, die Hintergrunddatenbank zu lesen, um das Paging zu unterstützen).
Sobald Sie Bootstrap heruntergeladen haben, verfügen Sie nicht über das Bootstrap-Tabellen-Plug-in, sondern müssen zusätzlich das Bootstrap-Tabellen-Plug-in herunterladen.
Bootstrap-Download-Adresse: http://www.bootcss.com/
Die Download-Adresse des Bootstrap-Tabellen-Plug-Ins (die folgenden drei hängen zusammen) lässt sich am besten von Github herunterladen
Offizielle Website-Adresse: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Github-Adresse: https://github.com/wenzhixin/bootstrap-table
Chinesische Dokumentation: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Gehen Sie zunächst zu Github, um die neueste Version herunterzuladen. Entpacken Sie sie nach dem Herunterladen wie folgt:
2.2. Fügen Sie Plug-Ins in die Seite ein
Kopieren Sie die Dateien im dist-Verzeichnis in das Projekt:
Sie müssen auch Bootstrap-Stile, JS- und JQuery-Dateien einführen. Die vollständige Einführung lautet wie folgt:
Zweitens: So verwenden Sie:
1. Schreiben Sie einfach eine leere Tabellenhülle
KaTeX-Analysefehler: Erwartetes 'EOF', bekam '#' an Position 3: ('#tableL01').boot… ('#tableL01').bootstrapTable({ //Ihre Daten werden hier geschrieben});
4. Bevor Sie dieses Formular starten, löschen Sie unbedingt zuerst das vorherige Formular. Die Methode ist:
$('#tableL01').bootstrapTable('destroy'); // Bevor Sie die Tabelle dynamisch laden, zerstören Sie zuerst die Tabelle. Die beiden
oben genannten Punkte 3 und 4 werden kombiniert, um zuerst 4 und dann 3 auszuführen.
5. Bereiten Sie die vor Kopfdaten:
var tableColumns = [
{field: 'name', title: 'name', sortable: true},
{field: 'number', title: 'number', sortable: true},
];
6. Tabelleninhaltsdaten vorbereiten:
var mydata=[
{Name: "aaaa", Nummer: 1111},
{Name: "bbbb", Nummer: 2222},
];
Beachten Sie, dass Name und Nummer des Tabelleninhalts ansonsten dem Feldnamen in Punkt 5 entsprechen , wird Ihre Tabelle den Inhalt nicht anzeigen. Das ist eine Falle.
7. Die vollständige $('#tableL01').bootstrapTable({}) sollte wie folgt geschrieben werden:
$('#tableL01').bootstrapTable({//Tabelleninitialisierungsspalten
: tableColumns, //Kopfdaten
:mydata, //Die Daten in der Tabelle, dies sind die lokal abgerufenen Daten, wenn die Daten aus dem Hintergrund abgerufen werden, es sollte sich in die Hintergrundadresse ändern
});
8. Um den Zweck des Front-End-Pagings zu erreichen, müssen die folgenden Parameter hinzugefügt werden:
$('#tableL01').bootstrapTable({//Tabelleninitialisierungsspalten
: tableColumns, //Header-
Daten:mydata, //Über Ajax zurückgegebene Daten
width:300,
height:268,
method: 'get',
pageSize: 3, //3 Elemente pro Seite pageNumber: 1, // pageList
auf Seite 1 : [10,25], //Anpassen der Anzahl der Elemente pro Seite entsprechend der Situation während der Verwendung. Obwohl Sie derzeit 3 Elemente pro Seite definieren, können Sie Passen Sie es jederzeit auf 10 oder 25 an. Cache: false, // Nicht zwischenspeichern striped: true, pagination: true, sidePagination: 'client', search: false, showRefresh: false, showExport: false, showFooter: true, / / exportTypes: ['csv', 'txt', 'xml'], clickToSelect: true, });
Nachdruck von: Tingbo (gelöscht, wenn ein Verstoß vorliegt)
Quelle: CSDN
Originaltext: https://blog.csdn.net/jintingbo/article/details/82924330