Detailed introduction to the use of twbsPagination.js paging plug-in

The project previously required a paging plug-in. In the past, the plug-in simply called pagenation.js was used. However, during the integration this time, a child in the project team used this plug-in and pondered it based on online examples. 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, you can introduce it into 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. When using the paging plug-in:

Yes Define a special page conversion method, introduce and use:

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, 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 in the paging are the first data. If asynchronous loading re-enters data on the page, and you want paging to continue to be implemented on the new data, you need to quote the following code:

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

The place where this code is placed is also particular, and it needs to be placed immediately before asynchronous loading Before loading the data, the asynchronously loaded data 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.

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