Bootstrap-table.js fügt eine Methode hinzu, um die Funktion zum Springen zu Seite xx zu implementieren

In diesem Artikel wird hauptsächlich die erweiterte Paging-Symbolleiste von bootstrap-table.js vorgestellt und die Funktion zum Springen zu Seite xx hinzugefügt. Da sich die Editorebene immer noch auf der Dom-Ebene befindet, unterstützt diese Erweiterung nur Tabellen auf der Seite Vorschläge sind willkommen und ich hoffe, dass sie allen helfen können.

[Ähnliche Videoempfehlung: Bootstrap-Tutorial]

Neues Projekt, ich werde das Bootstrap-Table-Steuerelement verwenden, um die Tabelle anzuzeigen die Seite, aber ich habe keine andere Wahl, als die Paging-Symbolleiste dieses Steuerelements nicht zur Seite xx zu springen, um mich an die lästigen Bedürfnisse der Künstler des Unternehmens anzupassen (Künstler, die nur Bilder produzieren können, aber mich fragen). für dieses und jenes) habe ich in den sauren Apfel gebissen und die Bootstrap-Tabelle geändert. Der Quellcode implementiert diese Funktion.

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 darüber sprechen, 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. Überdecken Sie den obigen Code mit dem folgenden Code.

  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;);

An dieser Stelle der Quellcode wird geändert.

2. Fügen Sie dann die folgende Klasse in die globale CSS-Datei ein

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

Wenn Sie den Schaltflächenstil anpassen müssen, können Sie ihn selbst in pgeBtn definieren

3. Fügen Sie in der js-Datei eine Sprungmethode 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 $('#table').bootstrapTable durch Ihre eigene definierte ID

ersetzen oder höher können Sie die Seitenzahl eingeben, um zu springen. Die Darstellung ist wie folgt:



Verwandte Empfehlungen:


Teilen über die Methode des Ajax-Springens zu einer neuen JSP-Seite

Wie man mit JS den aktuellen Domainnamen ermittelt und zur angegebenen Seite springt

Zugehörige Erklärung des Pfadproblems, nachdem Servlet zur JSP-Seite gesprungen ist

Das obige ist der detaillierte Inhalt vonBootstrap-table.js fügt eine Methode hinzu, um die Funktion zum Springen zu Seite xx zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!