bootstrap paginator使用簡述

2023-08-09 01:11:50 分類：留言 閱讀(7349)

1.引入bootstrap-paginator.js(依賴jquery)
2.html部分需要一個ul標簽,使用接下來我們會把該標簽設置為分頁組件

3.js部分(核心)

注意事項:

1.通過onPageClicked觸發ajax請求事件,也就是點擊頁碼觸發,這樣帶來的一個小問題是如果你在初始化后沒有點擊頁碼是不會顯示數據的,

所以加個click事件,這樣頁面加載之后就會顯示內容了

2.新聞總量的顯示是我自己加的,可以不寫

 

1 function AjaxPaginator(obj) {  2                             var newsCount;//該類新聞總量 3                             var totalPages;//總頁數 4                             var numberOfPages=3;//顯示的頁數 5                             var pageSize = 5;//每頁顯示數量 6                             var arr = location.href.split("&&"); 7                                $.ajax({  8                                  url:"${ pageContext.request.contextPath}/newsController/getNewsCount.action?"+arr[1] + "&&" + arr[2].split(".")[0], 9                                  dataType:"json",10                                  type:"GET",11                                  success:function(data) { 12                                     // 獲得新聞總量13                                     newsCount = data;14                                     //設置顯示的頁數15                                     totalPages = Math.ceil(newsCount/pageSize);16                                     if(totalPages < numberOfPages) { 17                                         numberOfPages = totalPages;18                                     } 19                                     //顯示的新聞總量20                                     $("#count").text(newsCount); 21                                     //分頁參數22                                     var options = { 23                                             currentPage:1,//當前的請求頁面。24                                             totalPages:totalPages,簡述//一共多少頁。25                                             size:"normal",使用//應該是頁眉的大小。26                                             bootstrapMajorVersion: 3,簡述//bootstrap的版本要求。27                                             alignment:"right",使用28                                             numberOfPages:numberOfPages,//顯示多少頁數29                                             itemTexts: function (type, page, current) { //如下的代碼是將頁眉顯示的中文顯示我們自定義的中文。30                                                 switch (type) { 31                                                 case "first": return "首頁";32                                                 case "prev": return "上一頁";33                                                 case "next": return "下一頁";34                                                 case "last": return "末頁";35                                                 case "page": return page;36                                                 }37                                             },簡述38                                             //點擊頁碼時ajax請求數據    39                                             onPageClicked: function(event,originalEvent,type,page){ 40                                                  $.ajax({ 41                                                      url:"${ pageContext.request.contextPath}/newsController/getNewsList.action?" +arr[1] + "&&" + arr[2].split(".")[0] + "&&pageSize="+pageSize +"&&page="+page,42                                                      dataType:"html",43                                                      type:"GET",44                                                      success:function(data) { 45                                                          $(".tab-content .media").remove();46                                                          $("#example").append(data);47                                                          $(".tab-content .media img").attr("src","${ pageContext.request.contextPath}/images/news-002.png");48                                                      }     49                                                  })50                                             },51                                             onPageChanged:function(event,oldPage,newPage) { 52                                                 $(".tab-content .media").remove();53                                             }54                                        }55                                      56                                           //初始化分頁插件57                                           obj.bootstrapPaginator(options);58                                         59                                          //自動觸發點擊事件,初始化第一頁數據60                                           $("#pageLimit .active a").click();61                                  }62                                     63                             })    64                               65                         }66                              AjaxPaginator($("#pageLimit"));

 4.后臺(dao用的hibernate)

分頁所必須的兩個數據是頁碼(page)和頁面顯示條數(pageSize),由于這些代碼是用在學校網站上的,不再給出,但是用hibernate分頁可以說是相當簡單的,他的setFirstResult(),setMaxResults()就搞定了

ps:使用完這個插件的時候是在今年的2月份,至今已經3個月了,一直沒來的及記錄下用法,歡迎參考我的關于Jquery DataTables的文章,http://www.cnblogs.com/tele-share/p/8667434.html

 

作者：tele
來源鏈接：https://www.cnblogs.com/tele-share/p/8982910.html