Bootstrap table分頁問題彙總

首先非常感謝作者針對bootstrap table分頁問題進行詳細的整理，并分享給了大家，希望通過這篇文章可以幫助大家解決Bootstrap table分頁的各種問題，謝謝大家的閱讀。

問題1 ：伺服器端取不到form值，querystring沒有問題， 但是request.form取不到值

解決：這是ajax的問題，原代碼使用原生的ajax。   1可以用讀流檔案解決。2 如果想用request.form 方式，設定  contentType: "application/x-www-form-urlencoded",

如

?

1 2 3 4 5 6 7 8 9 10

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

問題2： 設定傳遞到伺服器的參數

方法：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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,

問題3：背景取不到 pageSize 資訊

 解決：

1、在queryParams中設定

 2、在bootstrap-table.minjs檔案 修改源檔案為"limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,

修改 bootstrap-table.js 也可以

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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

配置加入  "queryParamsType": "limit",

 完整：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

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

問題4：分頁後,重新搜尋的問題

前提：自定義搜尋且有分頁功能,比如搜尋産品名的功能.

現象：當搜尋充氣娃娃的時候傳回100條記錄,翻到第五頁.  這時候搜尋按摩棒,資料有200條,結果應該是第一頁的記錄,但是實際顯示的還是第五頁的結果.  也就是重新搜尋後,pagenumber沒有變.

 解決：重新設定option就行了.

?

1 2 3 4 5

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

轉載于:https://www.cnblogs.com/telwanggs/p/8862161.html