Die Bootstrap-Tabelle ist ein leichtes Tabellen-Plug-In, das AJAX verwendet, um Daten im JSON-Format zu erhalten. Die Paging und die Datenfüllung sind sehr bequem und unterstützt die Internationalisierung. In letzter Zeit verwendete der Hintergrund dieses Plug-In, um eine Tabellenanwendung zusammenzufassen, um zusammenzufassen.
1. wie man benutzt
Sie können JS-Plug-Ins, Style Sheets und internationale Plug-Ins über die von YouPaiyun bereitgestellte CDN erhalten oder sie direkt auf der offiziellen Website herunterladen. Legen Sie das folgende JS-Plug-In und die Styles in den HTML-Header und verwenden Sie es.
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel = "Stylesheet"/> <script src = "http://cdn.bootcs.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </script> // Internationalisierung, Tabelle Chinese <Skript src = "http://cdn.bootcs.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2.Tabelle Datenfüllung
Es gibt zwei Möglichkeiten, Daten aus der Bootstrap -Tabelle zu erhalten. Einer soll die Datenquelle über die Data-URL-Eigenschaft der Tabelle angeben, aber die URL bei der Initialisierung der Tabelle mit JavaScript angeben, um Daten zu erhalten, wie im folgenden Beispiel gezeigt.
<table data-toggle = "table" data-url = "data.json"> <tead> ... </tead> </table> $ ('#table'). bootstrappable ({url: 'data.json'});Die zweite Methode zur Übergabe der ersten Methode ist flexibler bei der Verarbeitung komplexer Daten. Im Allgemeinen wird die zweite Methode verwendet, um Tabellendaten zu füllen.
var $ table = $ ('#table'); Name ', Feld:' Name ', Align:' Center ', Valign:' Middle '}, {Titel:' Status ', Align:' Center ', Valign:' Middle ',}, {Titel:' Anzahl der Teilnehmer ', Feld:' PartizipationCounts ', Align' Center '}, {Titel: Title: Title Numbers', Field ', Field: “,:" Total "," Field: 'StartTime', Align: 'Center',}, {Titel: 'Operation', Feld: 'ID', Align: 'Center', Formatter: Funktion (Wert, Zeile, Index) {var e = '<a href = "#" mce_href = "#" onclick = "bearbeiten (/' + row.id +/')"> ">"> ">"> " MCE_HREF = "#" Onclick = "del (/'+row.id+'/')"> lösche </a>';Das Feld Feld muss dem vom Server zurückgegebenen Feld entsprechen, bevor die Daten angezeigt werden.
3. Pagination und Suche
Beim Paging übergeht der Bootstrap -Tisch zwei Paging -Felder an das Backend: Begrenzung und Offset. Ersteres repräsentiert die Anzahl jeder Seite, standardmäßig 10, und letztere repräsentiert den Versatz von Daten während des Pagings.
Bei der Suche wird das Suchfeld an das Backend übergeben, wodurch der spezifische Suchinhalt angezeigt wird.
Die von der Serverseite zurückgegebenen Daten sollten auch zwei Felder enthalten: Seite (Anzahl der Seiten) und Gesamtdaten (Gesamtdaten), und das Front-End sollte basierend auf diesen beiden Feldern paginieren.
Der endgültige Anzeigeeffekt ist in der folgenden Abbildung dargestellt:
Die oben genannte Zusammenfassung der Tabellen -Implementierungsdatenfüllungs- und Paginierungsanwendung in Bootstrap, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!