Zusammenfassung der Probleme bei der Paginierung von Bootstrap-Tabellen [mit Antworten und Code]-Bootstrap-Tutorial-php.cn

Zusammenfassung der Probleme bei der Paginierung von Bootstrap-Tabellen [mit Antworten und Code]

angryTom

Freigeben： 2020-05-15 09:17:38

Original

2951 Leute haben es durchsucht

Zusammenfassung der Probleme bei der Paginierung von Bootstrap-Tabellen [mit Antworten und Code]

Dieser Artikel fasst mehrere Probleme zusammen, die bei der Verwendung der Bootstrap-Tabelle zur Implementierung von Paging auftreten können. Ich hoffe, dass er Ihnen hilfreich sein wird.

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. Der Originalcode 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“,

$(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
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

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

Methode:

function queryParams(params) {
return {
pageSize: params.limit,
pageNumber: params.pageNumber,
UserName: 4
};
}
 $(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true, 
queryParams: queryParams,

Nach dem Login kopieren

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

Lösung:

1. In queryParams Set 2. Ändern Sie die Quelldatei in der Datei „bootstrap-table.minjs“ auf „limit“===this.options.queryParamsType&&(e={limit:e.pageSize, pageNumber:e.pageNumber,

Ändern Sie bootstrap-table.js oder Sie können

if (this.options.queryParamsType === &#39;limit&#39;) {
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

3. Konfiguration „queryParamsType“ hinzufü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>

Nach dem Login kopieren

Problem 4: Das Problem der erneuten Suche nach dem Paging

Voraussetzung: Benutzerdefinierte Such- und Paging-Funktion, z. B. die Funktion zur Suche nach Produktnamen .

Phänomen: Bei der Suche nach aufblasbaren Puppen werden 100 Datensätze zurückgegeben und auf der fünften Seite angezeigt. Bei der Suche nach Massagestäben sollten derzeit 200 Datensätze vorhanden sein Die Datensätze befinden sich auf der ersten Seite, aber die tatsächliche Anzeige befindet sich immer noch auf der fünften Seite. Das heißt, nach der erneuten Suche hat sich die Seitenzahl nicht geändert:

Setzen Sie einfach die Option zurück.

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

Nach dem Login kopieren

Wenn Sie mehr erfahren möchten, können Sie hier klicken. Lass uns lernen, und hier sind 3 spannende Themen für dich: 　

Bootstrap-Video-Tutorial

Bootstrap Erste Schritte Tutorial

Das obige ist der detaillierte Inhalt vonZusammenfassung der Probleme bei der Paginierung von Bootstrap-Tabellen [mit Antworten und Code]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!