twbsPagination.js 페이징 플러그인 사용 공유-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-01-04 13:14:35

원래의

1703명이 탐색했습니다.

이 글은 주로 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. 페이징 플러그인은 기본적으로 위의 코드를 사용하여 모든 요구 사항을 충족합니다.