Zunächst möchte ich dem Autor dafür danken, dass er die detaillierten Fragen zur Bootstrap -Tabellenpagination und der Teile mit Ihnen ausgestellt hat. Ich hoffe, dieser Artikel kann Ihnen helfen, verschiedene Probleme in der Bootstrap -Tabellenpagination zu lösen. Vielen Dank für Ihre Lektüre.
FRAGE 1: Der Server kann den Formularwert nicht erhalten, es gibt kein Problem mit QueryString, aber die Anfrage. Form kann den Wert nicht erhalten
Lösung: Dies ist ein Problem mit AJAX. Der ursprüngliche Code verwendet native AJAX. 1 kann durch Lesen von Stream -Dateien gelöst werden. 2 Wenn Sie die Methode für Request.Form verwenden möchten, setzen Sie ContentType: "Anwendung/x-www-form-urlencoded",
wie
$ ('#Tablelist'). Bootstrappable ({Methode: 'Post', url: "", Höhe: $ (Fenster) .Height ()-200, Striped: TRUE, Datentyp: "JSON", Pagination: True, "QueryparamStype": "Limit", SingleSelect: False, ContentType: "Application/x-wwwwwwwwwwwwwwwwwwwwwwwww-formoded",, ",", "x-wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww-formed",, ",", "x-wwwwwwwwwwwwwwwwwwwwwww-formed",,Frage 2: Setzen Sie die an den Server übergebenen Parameter
Verfahren:
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,Frage 3: Die pageSsize -Informationen können nicht im Hintergrund abgerufen werden
lösen:
1. Stellen Sie es in Queryparams ein
2. In der Datei stootstrap-table.minjs, ändern Sie die Quelldatei in "limit" === this.options.queryparamstype && (e = {limit: e.pageSize, pageNumber: e.pagenumber,
Modifizierung von Bootstrap-table.js ist auch in Ordnung
if (this.options.queryparamstype === 'limit') {params = {search: params.SearchText, sort: params.sortname, order: params.sortorder}; if (this.options.Pagination) {params.limit = this.options.pagessize; (this.options.Pagenumber - 1);}}Konfigurieren Sie "Queryparamstype": "Limit",
ganz:
<script type = "text/javaScript"> $ (document) .ready (function () {$ ('#Tablelist'). Bootstrappable ({Methode: 'post', url: "getCompappylist", Höhe: $ (Fenster) .Height () - 200, Striped: TRUE, DATETYPE: DATETYPE: "JSON, JSON, PAGING:", Pagination ",", ",", ",", ",", "echt", "echt", "echt", "echte", "echte", "echte", "true", "true", "true", "true", "true". false,contentType: "application/x-www-form-urlencoded",pageSize: 10,pageNumber:1,search: false, //Do not display the search box showColumns: false, //Do not display the drop-down box (select the displayed column) sidePagination: "server", //Server request queryParams: queryParams,//minimunCountColumns: 2,responseHandler: Reaktionshandler, Spalten: [{Feld: 'CompanyId', Checkbox: True}, {Field: 'QQ', Titel: 'QQ', Width: 100, Align: 'Center', Valign: 'Middle', sortable: false}, {Field: 'CompanyName', Titel: 'name', withth: 100, Align: 'Mitte), Valign:' Middle ',' Middle '; responseHandler(res) {if (res.IsOk) {var result = b64.decode(res.ResultValue);var resultStr = $.parseJSON(res);return {"rows": resultStr.Items,"total": resultStr.TotalItems};} else {return {"rows": [],"total": 0};}}//Passed parameter function Queryparams (Params) {return {pageSize: params.limit, pageNumber: params.pagenumber, Benutzername: 4};} </script>Frage 4: Nach dem Paging nachforschen
Voraussetzung: Benutzerdefinierte Such- und Paging -Funktionen, wie die Funktion der Suche nach Produktnamen.
Phänomen: Bei der Suche nach aufblasbaren Puppen, geben Sie 100 Datensätze zurück und wenden Sie sich zu diesem Zeitpunkt nach Massagesticks, und das Ergebnis sollte der Datensatz auf der ersten Seite sein. Das tatsächliche Display ist jedoch das Ergebnis auf der fünften Seite. Das heißt, nach der Wiedersuche hat sich die Pagenumberne nicht geändert.
Lösung: Setzen Sie einfach die Option zurück.
Function Search () {$ ('#Tablelist'). Bootstrappable ({Pagenumber: 1, pageSize: 10});};Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Tutorial für Bootstrap -Tischnutzung
Bootstrap-Plug-in-Nutzungs-Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.