Informationen zur Verwendung von bootstrap-table.js zur Implementierung erweiterter Paging-Symbolleistenfunktionen

In diesem Artikel wird hauptsächlich die Paging-Symbolleiste der Erweiterung „bootstrap-table.js“ vorgestellt und die Funktion zum Springen zu Seite xx hinzugefügt. Da meine Ebene auf der Dom-Ebene feststeckt, unterstützt diese Erweiterung nur Tabellen auf der Seite Vorschläge sind willkommen,

neue Projekte vorzuschlagen. Ich habe vor, das Bootstrap-Table-Steuerelement zu verwenden, um die Tabelle auf der Seite anzuzeigen. Leider verfügt die Paging-Symbolleiste dieses Steuerelements nicht über die Funktion, zur xx-Seite zu springen Um sich an die Kunst des Unternehmens anzupassen (nur ein Künstler, der weiß, wie man Bilder produziert, mich aber nach diesem und jenem gefragt hat), habe ich in den sauren Apfel gebissen und den Quellcode von Bootstrap-Table geändert, um diese Funktion zu realisieren.

Hinweis: Da sich meine js-Ebene immer noch auf der Dom-Ebene befindet, unterstützt diese Erweiterung nur eine einzelne Tabelle auf der Seite. Das bedeutet, dass der Sprung ungültig ist, wenn dieselbe Seite zweimal auf die Bootstrap-Tabelle verweist.

Wenn Götter aus allen Lebensbereichen eine perfektere Lösung haben, hinterlassen Sie bitte eine Nachricht und lassen Sie es mich wissen, damit ich daraus lernen kann.

Ich werde nicht näher darauf eingehen, wie man im Internet auf Steuerelemente verweist. Lassen Sie uns direkt zum Quellcode gehen.

1. Laden Sie den Quellcode von bootstrap-table.js herunter (achten Sie darauf, dass Sie ihn nicht herunterladen, die Version, die ich heruntergeladen habe, ist: Version: 1.11.0), verwenden Sie im Quellcode „

html.push(&#39;</p>&#39;, &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;, &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;, &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

OK, decken Sie den obigen Code in den folgenden Code ab

  html.push(&#39;</p>&#39;,
        &#39;<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>&#39;,
        &#39;<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</p>&#39;,
        &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
        &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
        &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

Dazu ist der Quellcode fertig. , dann hinzufügen die folgende Klasse

.pageBtn {
  
}
.pageNum {
  width: 40px;
  border-radius: 3px;
}
.goPage {
  float: right;
  margin-left: 5px;
  margin-top: 13px;
  height: 30px;
}

in der globalen CSS-Datei. Wenn Sie den Schaltflächenstil anpassen müssen, können Sie ihn selbst in pgeBtn definieren

3. Fügen Sie die Sprungmethode in der JS-Datei hinzu

function toPage() {
  var pageNum = $("#pageNum").val();
  if (pageNum) {
    $('#table').bootstrapTable('selectPage', parseInt(pageNum));
  }
}

Beachten Sie, dass meine Tabellen-ID als Tabelle definiert ist. Sie müssen

durch Ihre eigene definierte ID

$('#table').bootstrapTable ersetzen. Dann können Sie die Seitenzahl eingeben, um zu springen folgt:

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird

Verwandte Artikel:

In Javascript. So erhalten Sie die obersten N-Hauptfarbwerte des Bildes in
So erstellen Sie eine Logistikkarte in D3.js (ausführliches Tutorial)
Über die ejsExcel-Vorlage. So verwenden Sie

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von bootstrap-table.js zur Implementierung erweiterter Paging-Symbolleistenfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!