Bootstrap Paginator 페이징 플러그인은 Ajax와 결합하여 새로 고침되지 않는 동적 페이징 효과를 구현합니다.

Bootstrap Paginator 페이징 플러그인 다운로드 주소:

DownloadVisit Project in GitHub

1 페이지를 매겨야 하는 페이지에 대한 js 함수입니다:

<span style="font-size:14px;">function paging(page){
$.ajax({
type: "GET",
url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",
dataType:"json",
success: function(msg){
....//省略（查询出来数据）
}
});
$.ajax({
type: "GET",
url:"${ctx}/api/v1/user/count/1",
dataType:"json",
success:function(msg){
var pages = Math.ceil(msg.data/5);//这里data里面有数据总量
var element = $(&#39;#pageUl&#39;);//对应下面ul的ID
var options = {
bootstrapMajorVersion:3,
currentPage: page,//当前页面
numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）
totalPages:pages //总页数
}
element.bootstrapPaginator(options);
}
});
}</span>

페이지:

<span style="font-size:14px;"><ul class="pagination" id="pageUl">
</ul></span>

*li 자동 생성

2. 가장 중요한 것은 bootstrap-paginator.js 소스 파일을 다음과 같이 직접 변경하는 것입니다.

<span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {
//show the corresponding page and retrieve the newly built item related to the page clicked before for the event return
var currentTarget = $(event.currentTarget);
switch (type) {
case "first":
currentTarget.bootstrapPaginator("showFirst");
paging(page);
break;
//上一页
case "prev":
currentTarget.bootstrapPaginator("showPrevious");
paging(page);
break;
case "next":
currentTarget.bootstrapPaginator("showNext");
paging(page);
break;
case "last":
currentTarget.bootstrapPaginator("showLast");
paging(page);
break;
case "page":
currentTarget.bootstrapPaginator("show", page);
paging(page);
break;
}
},</span>

* 호출 후 페이징 클릭한 페이지 스타일이 나옵니다. (페이지) 메서드에는 여기 페이지 소스 파일의 매개변수가 이미 있으므로 직접 전달하세요!

효과: 스타일이 변경되면 컨트롤의 페이지 값을 직접 사용하여 Ajax 요청을 보냅니다! 마지막으로 새로 고침 페이징이 달성되지 않습니다.

위 내용은 편집자가 Bootstrap Paginator 페이징 플러그인을 ajax와 결합하여 동적 새로 고침되지 않는 페이징 효과를 구현하여 소개하는 관련 지식이기를 바랍니다. 모든 분들께 도움이 될 것입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

동적 새로 고침이 없는 페이징 효과를 달성하기 위한 Bootstrap Paginator 페이징 플러그인과 Ajax의 조합에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!