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

이 글은 참고하실 수 있도록 부트스트랩 테이블 페이징 문제를 공유합니다.

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

해결 방법: 이는 Ajax 문제입니다. 원래 코드는 기본 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 정보를 얻을 수 없습니다

해결책:

queryParams에 1이 설정되어 있습니다

2 bootstrap-table.minjs 파일의 소스 파일을

으로 수정합니다.

"제한"===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", //服务端请求
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개의 레코드가 반환되고 5번째 페이지로 넘어갑니다. 마사지봉을 검색하면 200개의 레코드가 나와야 하는데 실제 표시는 그대로입니다. 즉, 다시 검색해도 페이지 번호가 변경되지 않았습니다.

해결책: 옵션을 재설정하세요.

 function search(){

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

}

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.