Bootstrap table分頁(yè)問(wèn)題匯總
首先非常感謝作者針對(duì)bootstrap table分頁(yè)問(wèn)題進(jìn)行詳細(xì)的整理,并分享給了大家,希望通過(guò)這篇文章可以幫助大家解決Bootstrap table分頁(yè)的各種問(wèn)題,謝謝大家的閱讀。
問(wèn)題1 :服務(wù)器端取不到form值,querystring沒(méi)有問(wèn)題,但是request.form取不到值
解決:這是ajax的問(wèn)題,原代碼使用原生的ajax。 1可以用讀流文件解決。2 如果想用request.form 方式,設(shè)置 contentType: "application/x-www-form-urlencoded",
如
$('#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",
問(wèn)題2: 設(shè)置傳遞到服務(wù)器的參數(shù)
方法:
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,
問(wèn)題3: 后臺(tái)取不到 pageSize 信息
解決:
1、在queryParams中設(shè)置
2、在bootstrap-table.minjs文件 修改源文件為"limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,
修改 bootstrap-table.js 也可以
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",
完整:
<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", //服務(wù)端請(qǐng)求 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 }; } } //傳遞的參數(shù) function queryParams(params) { return { pageSize: params.limit, pageNumber: params.pageNumber, UserName: 4 }; } </script>
問(wèn)題4:分頁(yè)后,重新搜索的問(wèn)題
前提:自定義搜索且有分頁(yè)功能,比如搜索產(chǎn)品名的功能.
解決:重新設(shè)置option就行了.
function search(){ $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); }
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專(zhuān)題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
- Bootstrap Table使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- bootstrap Table的一些小操作
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- Bootstrap Table的使用總結(jié)
- BootStrap 可編輯表Table格
- Bootstrap Table從服務(wù)器加載數(shù)據(jù)進(jìn)行顯示的實(shí)現(xiàn)方法
- bootstrap Table的使用方法總結(jié)
相關(guān)文章
Uniapp中使用Echarts的詳細(xì)過(guò)程
這篇文章主要介紹了Uniapp中使用Echarts的示例詳解這里只舉例折線(xiàn)圖,介紹了uni-app微信小程序使用echarts的方法,下載echart組件,可以先隨便建個(gè)文件夾,然后 npm init,接著下載依賴(lài),需要的朋友可以參考下2022-11-11用JavaScript和jQuery實(shí)現(xiàn)瀑布流
本篇文章主要介紹了用JavaScript和jQuery實(shí)現(xiàn)瀑布流的方法,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03JS實(shí)現(xiàn)用特殊符號(hào)替換字符串的中間部分區(qū)域的實(shí)例代碼
相信很多人都遇到過(guò)敏感信息需要做部分隱藏功能,大多數(shù)都是用特殊符號(hào)去替換。今天小編給大家?guī)?lái)了JS實(shí)現(xiàn)用特殊符號(hào)替換字符串的中間部分區(qū)域的實(shí)例代碼,需要的朋友參考下吧2018-07-07微信小程序 實(shí)例開(kāi)發(fā)總結(jié)
這篇文章主要介紹了微信小程序 開(kāi)發(fā)過(guò)程中遇到問(wèn)題總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04