twbsPagination.js paging plug-in usage sharing

This article mainly brings you an experience (sharing) based on the use of the twbsPagination.js paging plug-in. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

The project previously required a paging plug-in. In the past, the plug-in simply called pagenation.js was used. However, during this integration, a child in the project team used this plug-in and thought about it based on online examples. Bundle. In fact, the general process is the same. I will mainly share some of my experiences using this paging plug-in:

1. To introduce the paging plug-in into HTML, you need:

bootstrap .css

Paging plug-in js

The paging style css written by yourself [If not, you can also directly use the paging css provided by bootstrap. 】

Using jquery can be introduced into 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. When using the paging plug-in:

You can define a special page conversion method, introduce and use:

html:

<ul id="pagination" class="pagination">
</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. Note : When using the paging plug-in, please note that if there is other asynchronously loaded data in the page, after running the paging method for the first time, the paging style on the page and the data data in the paging are the first data. If the asynchronous loading is restarted, If you enter data on the page and want paging to continue on the new data, you need to quote the following code:

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

##This code The place where it is put is also important. It needs to be placed before the data that is about to be loaded asynchronously. The data loaded asynchronously first clears the paging plug-in. At this time, the paging data loaded again is the new data content.

4. The paging plug-in can basically use the above code to satisfy all requirements.

Related recommendations:

jQuery Pagination paging plug-in detailed explanation

Examples to explain the two types of bootstrap paginator paging plug-in Usage

Share a jq paging plug-in

The above is the detailed content of twbsPagination.js paging plug-in usage sharing. For more information, please follow other related articles on the PHP Chinese website!