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

이전에는 페이징 플러그인이 필요한 프로젝트였는데, 예전에는 단순히 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 = $('#managePagination').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 = {
                'start':start,
                'end':end
            };
            ds.manageSystem(manageSystemUrl,param);//异步加载的方法，主要需要将起始页与结束页带回后台
        }
    });
    obj.data();//加载分页样式
},

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

1 //页面重载时置空分页数据（属于分页插件）
2 $('#managePagination').empty();
3 $('#managePagination').removeData("twbs-pagination");
4 $('#managePagination').unbind('page');

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

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

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