Bootstrap 테이블 페이징 문제 요약

먼저 부트스트랩 테이블 페이징 문제를 자세히 정리하여 모두와 공유해 주신 작성자에게 진심으로 감사드립니다. 이 글이 부트스트랩 테이블 페이징의 다양한 문제를 해결하는 데 도움이 되기를 바랍니다. .

문제 1: 서버가 양식 값을 가져올 수 없습니다. 쿼리 문자열에는 문제가 없지만 request.form은 값을 가져올 수 없습니다.

해결책: 이는 원본 코드입니다. 네이티브 아약스를 사용합니다. 1은 스트림 파일을 읽어서 해결할 수 있습니다. 2 request.form 메소드를 사용하려면 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",

으로 설정하세요. 질문 2: 매개변수를 설정하세요. 서버로 전달

방법:

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.

2. bootstrap-table.minjs 파일의 소스 파일을 "limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,

부트스트랩 수정 - 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() {
 $(&#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>

질문4: 페이징 후 다시 검색 문제

전제: 맞춤 검색 및 상품명 검색 기능 등 페이징 기능.

현상: 풍선인형 검색 시 100 안마봉을 검색해보니 200개의 데이터가 나와야 하는데 실제로는 5페이지의 결과가 나와 있었습니다. 다시 검색해도 페이지 번호는 바뀌지 않았습니다.

해결 방법: 옵션 재설정

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

위 내용은 이 글의 전체 내용이므로 모든 분들의 학습에 도움이 되기를 바랍니다. .

부트스트랩 테이블 페이징 문제에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!