집 >웹 프론트엔드 >JS 튜토리얼 >twbsPagination.js 페이징 플러그인 사용 공유

twbsPagination.js 페이징 플러그인 사용 공유

小云云원래의: 2018-01-04 13:14:351730검색

이 글은 주로 twbsPagination.js 페이징 플러그인 사용을 기반으로 한 경험(공유)을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

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

bootstrap.css

paging 플러그인 js

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

jquery를 사용하면 jquery.js

html을 가져올 수 있습니다.

<script type="text/javascript" src="<c:url value="../js/jquery.twbsPagination.js"/>"></script>
<link rel="stylesheet" href="<c:url value=" rel="external nofollow" rel="external nofollow" /content/common/css/bootstrap.min.css"/>" />
<link rel="stylesheet" href="<c:url value=" rel="external nofollow" rel="external nofollow" /content/common/css/pagination.css"/>" />

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

특별한 페이지 변환 방법을 정의하고 사용:

html에서:

<ul id="pagination" class="pagination">
</ul>

in 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. 참고: 페이징 플러그인을 사용할 때 다른 것이 있으면 주의하세요. 페이지에 비동기적으로 로드된 데이터를 처음으로 실행하면 페이지의 페이징 스타일과 페이징의 데이터가 처음으로 페이지에 데이터를 다시 입력합니다. 새로운 데이터에 페이징을 계속 구현하려면 다음 코드를 인용해야 합니다.

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

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

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

twbsPagination.js 페이징 플러그인 사용 공유

관련 기사