twbsPagination.js 페이징 플러그인 사용에 대한 자세한 소개

黄舟
풀어 주다: 2017-10-21 10:16:43
원래의
3483명이 탐색했습니다.

이전에는 페이징 플러그인이 필요한 프로젝트였는데, 예전에는 단순히 pagenation.js라는 플러그인을 사용했는데, 이번 통합 과정에서 프로젝트 팀의 한 어린이가 이 플러그인을 사용하고 온라인을 기반으로 고민했습니다. 예. 실제로 일반적인 프로세스는 동일합니다.

1. 페이징 플러그인을 HTML에 도입하려면 다음이 필요합니다.

bootstrap.css

paging 플러그인 js

직접 작성 Pagination 스타일 CSS [그렇지 않은 경우 bootstrap에서 제공하는 paging CSS를 직접 사용할 수도 있습니다. 】

jquery를 사용하면 jquery.js

html에 도입할 수 있습니다.

1 <script type="text/javascript" src="<c:url value="../js/jquery.twbsPagination.js"/>"></script>
2 <link rel="stylesheet" href="<c:url value="/content/common/css/bootstrap.min.css"/>" />
3 <link rel="stylesheet" href="<c:url value="/content/common/css/pagination.css"/>" />
로그인 후 복사

2 페이징 플러그인을 사용하는 경우:

특별한 페이지 변환 방법을 정의하여

html에 도입할 수 있습니다. :


1 <ul id="pagination" class="pagination">
2 </ul>
로그인 후 복사

js:

managementPage:function (pagesize) {
    var obj = $(&#39;#managePagination&#39;).twbsPagination({
        totalPages: pagesize,//总页数
        startPage: 1,//起始页
        visiblePages: pagesize>5?5:pagesize,//展示页数,超出5页展示5页,未超出时展示总页数
        initiateStartPageClick: true,
        hideOnlyOnePage: true,//只有一页时不展示分页
        onPageClick:function (event,page) {//点击页面事件,回调函数,只能使用ajax异步加载,暂时未发现能够直接在前端操作data的方法。
            $(this).addClass("active").siblings().removeClass("active");

            var start = (page - 1)*5+1;
            var end = page*5+1;
            var param = {
                &#39;start&#39;:start,
                &#39;end&#39;:end
            };
            ds.manageSystem(manageSystemUrl,param);//异步加载的方法,主要需要将起始页与结束页带回后台
        }
    });
    obj.data();//加载分页样式
},
로그인 후 복사

3, 참고: 페이징 플러그인 사용 시 페이지에 비동기적으로 로드된 다른 데이터가 있는 경우 처음 페이징 메서드를 실행한 후, 페이지의 페이징 스타일은 페이징의 데이터와 다릅니다. 데이터는 첫 번째 데이터입니다. 비동기 로딩으로 페이지에 데이터를 다시 입력하고 새 데이터에 대해 페이징을 계속 구현하려는 경우 다음 코드를 인용해야 합니다.

1 //页面重载时置空分页数据(属于分页插件)
2 $(&#39;#managePagination&#39;).empty();
3 $(&#39;#managePagination&#39;).removeData("twbs-pagination");
4 $(&#39;#managePagination&#39;).unbind(&#39;page&#39;);
로그인 후 복사

이 코드가 배치되는 위치도 특정하여 배치해야 합니다. 비동기적으로 로드된 데이터 전에 비동기적으로 로드된 데이터는 먼저 페이징 플러그인을 지웁니다. 다시 로드된 페이징 데이터는 새로운 데이터 콘텐츠입니다.

4. 페이징 플러그인은 기본적으로 위의 코드를 사용하여 모든 요구 사항을 충족합니다.

위 내용은 twbsPagination.js 페이징 플러그인 사용에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿