Lösen Sie die Probleme, die bei der Implementierung der JS-Komponenten-Bootstrap-Tabelle paging_javascript-Fähigkeiten auftreten

In diesem Artikel werden die Probleme des Bootstrap-Table-Pagings als Referenz erläutert. Der spezifische Inhalt lautet wie folgt:

Problem 1: Der Server kann den Formularwert nicht abrufen. Es gibt kein Problem mit der Abfragezeichenfolge, 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“,

als

 $('#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 an den Server übergebenen Parameter fest

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 ist in queryParams eingestellt

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

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

Sie können auch bootstrap-table.js ändern

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

Konfiguration hinzugefügt „queryParamsType“: „limit“,

Abgeschlossen

<script type="text/javascript">




$(document).ready(function() {
 $('#tableList').bootstrapTable({
method: 'post',
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: 'CompanyId',

checkbox: true

},
{
field: 'qq',

title: 'qq',

width: 100,

align: 'center',

valign: 'middle',

sortable: false

}
,
{
field: 'companyName',

title: '姓名',

width: 100,

align: 'center',

valign: 'middle',

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. Nach dem Blättern erneut suchen

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 die fünfte Seite umgedreht. Bei der Suche nach Massagestäben werden auf der ersten Seite 200 Datensätze angezeigt, die tatsächliche Anzeige erfolgt jedoch Das Ergebnis ist, dass sich die Seitenzahl nach einer erneuten Suche nicht geändert hat

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

 function search(){

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

}

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