項目中之前需要分頁插件，以前用的都是單純叫做pagenation.js的插件，但是這次集成的時候，項目組一個孩紙用了這個插件，結合網上的例子琢磨了一把。其實大致流程都是相同的，主要將我在用這個分頁插件的一些心得分享出來： 1、分頁插件引入html中需要： bootstrap.css 分頁插件js 自 ...
項目中之前需要分頁插件，以前用的都是單純叫做pagenation.js的插件，但是這次集成的時候，項目組一個孩紙用了這個插件，結合網上的例子琢磨了一把。其實大致流程都是相同的，主要將我在用這個分頁插件的一些心得分享出來： 1、分頁插件引入html中需要： bootstrap.css 分頁插件js 自己寫的分頁的樣式css【如果不用，也可以直接用bootstrap所帶的分頁css。】 使用jquery可以引入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、分頁插件使用時： 可以定義一個專門頁面轉換的方法，引入使用： html中：
1 <ul id="pagination" class="pagination"> 2 </ul>js中:
1 managementPage:function (pagesize) { 2 var obj = $('#managePagination').twbsPagination({ 3 totalPages: pagesize,//總頁數 4 startPage: 1,//起始頁 5 visiblePages: pagesize>5?5:pagesize,//展示頁數，超出5頁展示5頁，未超出時展示總頁數 6 initiateStartPageClick: true, 7 hideOnlyOnePage: true,//只有一頁時不展示分頁 8 onPageClick:function (event,page) {//點擊頁面事件，回調函數，只能使用ajax非同步載入，暫時未發現能夠直接在前端操作data的方法。 9 $(this).addClass("active").siblings().removeClass("active"); 10 11 var start = (page - 1)*5+1; 12 var end = page*5+1; 13 var param = { 14 'start':start, 15 'end':end 16 }; 17 ds.manageSystem(manageSystemUrl,param);//非同步載入的方法，主要需要將起始頁與結束頁帶回後臺 18 } 19 }); 20 obj.data();//載入分頁樣式 21 },
3、註意：分頁插件在使用時註意，如果頁面中存在其他非同步載入的數據，在運行分頁方法第一次後，頁面上的分頁樣式與分頁中的data數據就是第一次的數據，如果非同步載入重新在頁面上錄入數據，並希望分頁繼續在新的數據上實現，則需要引用以下代碼：
1 //頁面重載時置空分頁數據（屬於分頁插件） 2 $('#managePagination').empty(); 3 $('#managePagination').removeData("twbs-pagination"); 4 $('#managePagination').unbind('page');這段代碼放入的地方也有講究，需要放在即將非同步載入的數據之前，先非同步載入的數據一步清空分頁插件，此時再次載入的分頁數據才是新的數據內容。 4、分頁插件基本使用以上代碼便可全部滿足。
