Twbspagination.js page plug-in use of experience

In the project before the need to page plug-ins, formerly used are simply called Pagenation.js plug-ins, but this time the integration, the project team a child paper with this plugin, combined with the example of the Internet to ponder a. In fact, the general process is the same, mainly in my use of this page plug-ins to share some of the experience:1, the introduction of the page plug-in HTML needs:BOOTSTRAP.CSS page plug-in JS self-written page-style css "if not, you can also directly use the bootstrap with the pagination CSS." "Using jquery can be introduced into the jquery.js HTML:

1 <Scripttype= "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 the page plug-in is used:You can define a specialized page conversion method that is introduced in: HTML:

1 <  ID= "Pagination"  class= "pagination">2</  ul>

JS in:

1Managementpage:function(pagesize) {2     varobj = $ (' #managePagination '). twbspagination ({3Totalpages:pagesize,//Total Pages4Startpage:1,//Start Page5Visiblepages:pagesize>5?5:pagesize,//Number of impressions, over 5 pages, 5 pages, total pages displayed when not exceeded6Initiatestartpageclick:true,7Hideonlyonepage:true,//pagination is not displayed on one page8Onpageclick:function(Event,page) {//Click on the page event, callback function, can only use Ajax asynchronous loading, temporarily did not find the ability to manipulate data directly on the front-end method. 9$( This). addclass ("active"). Siblings (). Removeclass ("Active");Ten  One             varStart = (page-1) *5+1; A             varEnd = Page*5+1; -             varparam = { -' Start ': Start, the' End ': End -             }; -Ds.managesystem (Managesystemurl,param);//asynchronous loading method, mainly need to bring the start page and the end page back to the background -         } +     }); -Obj.data ();//Load page-out style +},

3.Note:When using the paging plug-in, note that if there are other asynchronously loaded data in the page, after the first time the paging method is run, the paging style on the page and the data in the paging are the first data, if the asynchronous loading re-entry data on the page, and you want the paging to continue to be implemented on the new data, You need to refer to the following code:

1 // empty Paging data when page reload (belongs to the paging plug-in) 2 $ (' #managePagination '). empty (); 3 $ (' #managePagination '). Removedata ("twbs-pagination"); 4 $ (' #managePagination '). Unbind (' page ');

This code is placed in a place that needs to be placed on the data that is about to be asynchronously loaded, the data is loaded asynchronously one step empty the paging plug-in, at this time the paging data is loaded again is the new data content. 4, the page plug-in basic use of the above code can be fully satisfied.

Twbspagination.js page plug-in use of experience