Heim > Web-Frontend > js-Tutorial > Hauptteil

Lösen Sie die Probleme, die bei der Implementierung des Bootstrap-Tabellen-Pagings für JS-Komponenten aufgetreten sind

高洛峰
Freigeben: 2017-01-04 11:55:31
Original
1727 Leute haben es durchsucht

Dieser Artikel beschreibt das Bootstrap-Table-Paging-Problem als Referenz. Der spezifische Inhalt lautet wie folgt: Problem 1: Der Formularwert kann nicht auf der Serverseite abgerufen werden. Es gibt jedoch kein Problem request.form kann nicht abgerufen werden.

Lösung: Dies ist ein Ajax-Problem. Der ursprüngliche Code verwendet natives Ajax. 1 kann durch Lesen von Stream-Dateien gelöst werden. 2 Wenn Sie die Methode „request.form“ verwenden möchten, legen Sie contentType fest: „application/x-www-form-urlencoded“,

, z. B.

Frage 2. Legen Sie die Parameter fest an den Server übergeben
$('#tableList').bootstrapTable({
method: 'post',
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",
Nach dem Login kopieren

Methode:

Problem 3. Die pageSize-Informationen können im Hintergrund nicht abgerufen werden
function queryParams(params) {
 
return {
pageSize: params.limit,
 
pageNumber: params.pageNumber,
 
UserName: 4
 
};
 
}
 
 $('#tableList').bootstrapTable({
method: 'post',
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true, 
 
queryParams: queryParams,
Nach dem Login kopieren

Lösung:

1 Satz

in queryParams 2 Ändern Sie die Quelldatei in der Datei bootstrap-table.minjs in

"limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber: e.pageNumber,

Ändern Sie bootstrap-table.js und Sie können auch

Konfiguration hinzufügen, um „queryParamsType“: „limit“,
if (this.options.queryParamsType === 'limit') {
params = {
search: params.searchText,
sort: params.sortName,
order: params.sortOrder
};
if (this.options.pagination) {
params.limit = this.options.pageSize;
 
params.pageNumber=this.options.pageNumber,
params.offset = this.options.pageSize * (this.options.pageNumber - 1);
}
}
Nach dem Login kopieren

Complete

hinzuzufügen

Frage 4. Nach dem Paging, Problem mit der erneuten Suche
<script type="text/javascript">
 
 
 
 
$(document).ready(function() {
 $(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
url: "getcompapylist",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",
pageSize: 10,
pageNumber:1,
search: false, //不显示 搜索框
showColumns: false, //不显示下拉框(选择显示的列)
sidePagination: "server", //服务端请求
queryParams: queryParams,
//minimunCountColumns: 2,
responseHandler: responseHandler,
columns: [
{
field: &#39;CompanyId&#39;,
 
checkbox: true
 
},
{
field: &#39;qq&#39;,
 
title: &#39;qq&#39;,
 
width: 100,
 
align: &#39;center&#39;,
 
valign: &#39;middle&#39;,
 
sortable: false
 
}
,
{
field: &#39;companyName&#39;,
 
title: &#39;姓名&#39;,
 
width: 100,
 
align: &#39;center&#39;,
 
valign: &#39;middle&#39;,
 
sortable: false
 
}
]
});
 
});
function responseHandler(res) {
 
 
if (res.IsOk) {
var result = b64.decode(res.ResultValue);
 
var resultStr = $.parseJSON(result);
return {
"rows": resultStr.Items,
"total": resultStr.TotalItems
};
 
} else {
return {
"rows": [],
"total": 0
};
}
 
}
 
//传递的参数
 
function queryParams(params) {
 
return {
pageSize: params.limit,
 
pageNumber: params.pageNumber,
 
UserName: 4
 
};
 
}
</script>
Nach dem Login kopieren

Voraussetzung: Benutzerdefinierte Such- und Paging-Funktion, z. B. die Funktion zum Suchen von Produktnamen.

Phänomen: Bei der Suche Für aufblasbare Puppen werden 100 Datensätze zurückgegeben. Beim Scrollen zur fünften Seite werden derzeit 200 Daten angezeigt. Das Ergebnis sollte der Datensatz auf der ersten Seite sein, die tatsächlichen Ergebnisse werden jedoch weiterhin angezeigt Ergebnisse auf der fünften Seite. Das heißt, nach der erneuten Suche hat sich die Seitenzahl nicht geändert.

Lösung: Setzen Sie einfach die Option zurück.

Das Obige ist der gesamte Inhalt Ich hoffe, dass es für alle hilfreich ist. Weitere Lösungen für die Probleme, die bei der Implementierung der JS-Komponenten-Bootstrap-Tabelle auftreten, finden Sie auf der chinesischen Website 🎜>
function search(){
 
 $(&#39;#tableList&#39;).bootstrapTable({pageNumber:1,pageSize:10});
 
}
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage