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

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",

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,

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

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>

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(){
 
 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10});
 
}