JS 구성요소 부트스트랩 테이블 페이징 구현 중에 발생한 문제를 해결합니다.

이 기사에서는 참고용으로 부트스트랩 테이블 페이징 문제를 공유합니다. 구체적인 내용은 다음과 같습니다

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

해결 방법: 이는 원본 코드가 기본 ajax를 사용하는 문제입니다. 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세트

in queryParams 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",

Complete

을 추가할 수도 있습니다.

<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개의 레코드가 반환되며, 5번째 페이지로 스크롤하면, 이때 안마봉을 검색하면 200개의 데이터가 나와야 하지만 실제 표시되는 결과는 그대로입니다. 즉, 다시 검색해도 페이지 번호가 변경되지 않았습니다.

해결 방법:

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

위 내용이 전체 내용입니다.

JS 구성요소 부트스트랩 테이블 페이징을 구현하는 동안 발생하는 문제에 대한 더 많은 솔루션을 보려면 PHP 중국어 웹사이트를 참조하세요.