Zusammenfassung der Probleme beim Paging von Bootstrap-Tabellen

Zunächst möchte ich dem Autor dafür danken, dass er die Probleme mit der Bootstrap-Tabellen-Page im Detail gelöst und mit allen geteilt hat. Ich hoffe, dass dieser Artikel Ihnen bei der Lösung verschiedener Probleme mit der Bootstrap-Tabellen-Page helfen kann. Vielen Dank fürs Lesen .

Problem 1: Der Server kann den Formularwert nicht abrufen. Es gibt kein Problem mit querystring, aber request.form kann den Wert nicht abrufen.

Lösung: Dies ist ein Ajax-Problem 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.

$('#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",

Frage 2: Legen Sie die Parameter fest an den Server übergeben

Methode:

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,

Problem 3: Die pageSize-Informationen können nicht im Hintergrund abgerufen werden

Lösung:

1

<🎜 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 kann auch in

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

konfiguriert werden, um „queryParamsType“ hinzuzufügen: „limit“,

Vollständig:

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

Frage 4: Suchen Sie nach dem Blättern erneut. Problem

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

Phänomen: Bei der Suche nach aufblasbaren Puppen 100 Datensätze werden zurückgegeben und die fünfte Seite wird umgedreht. Als ich nach Massagestäben suchte, waren es eigentlich 200 Datensätze, die auf der ersten Seite angezeigt wurden. Nach der erneuten Suche hat sich die Seitennummer nicht geändert.

Lösung: Option zurücksetzen

function search(){
 
 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10});
 
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium hilfreich ist .

Weitere verwandte Artikel zu Bootstrap-Tabellen-Page-Problemen finden Sie auf der chinesischen PHP-Website