Bootstrap 테이블 페이지 매김 문제 요약 [답변 및 코드 포함]-부트스트랩 튜토리얼-php.cn

Bootstrap 테이블 페이지 매김 문제 요약 [답변 및 코드 포함]

angryTom

풀어 주다： 2020-05-15 09:17:38

원래의

2952명이 탐색했습니다.

Bootstrap 테이블 페이지 매김 문제 요약 [답변 및 코드 포함]

이 문서는 부트스트랩 테이블을 사용하여 페이징을 구현할 때 발생할 수 있는 몇 가지 문제를 요약합니다. 이 문서가 모든 사람에게 도움이 될 수 있기를 바랍니다.

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

해결책:

이것은 Ajax 문제입니다. 원본 코드는 기본 Ajax를 사용합니다. 1은 스트림 파일을 읽어서 해결할 수 있습니다. 2 request.form 메소드를 사용하려면 contentType: "application/x-www-form-urlencoded",

$(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",

로그인 후 복사

Question 2: 서버에 전달되는 매개변수를 설정하세요.

방법:

function queryParams(params) {
return {
pageSize: params.limit,
pageNumber: params.pageNumber,
UserName: 4
};
}
 $(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true, 
queryParams: queryParams,

로그인 후 복사

문제 3: 페이지 크기 정보를 백그라운드에서 가져올 수 없습니다.

#🎜🎜 # 해결 방법:

1. queryParams에

을 설정합니다. 2. bootstrap-table.minjs 파일의 소스 파일을 "limit"=으로 수정합니다. ==this.options.queryParamsType&& (e={limit:e.pageSize,pageNumber:e.pageNumber,

bootstrap-table.js

if (this.options.queryParamsType === &#39;limit&#39;) {
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);
}
}

로그인 후 복사

3을 수정할 수도 있습니다. . "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개의 항목이 반환됩니다. 기록을 하고 5번째 페이지로 넘어갑니다. 이때 안마봉을 검색하면 200개의 데이터가 나옵니다. 결과는 첫 페이지에 있는 기록이어야 하지만 실제 표시되는 결과는 그대로입니다. 즉, 다시 검색해도 페이지 번호는 변경되지 않았습니다.# 🎜🎜#

해결 방법:

옵션을 재설정하면 됩니다.

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

로그인 후 복사

# 🎜🎜# 더 자세히 알고 싶으시면 여기를 클릭해 배우시면 됩니다. 멋진 주제 3개를 첨부하겠습니다:

🎜#Bootstrap 시작하기 튜토리얼

# 🎜🎜#

위 내용은 Bootstrap 테이블 페이지 매김 문제 요약 [답변 및 코드 포함]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!