bootstrap paginator分頁前後台用法樣本，bootstrappaginator

bootstrap paginator分頁前後台用法樣本，bootstrappaginator

bootstrap paginator分頁前後台用法樣本，供大家參考，具體內容如下

準備工作：

bootstrap-paginator.js 外掛程式
github開源項目百度自行下載

引入js檔案（JQuery1.8+bootstrap.min.js+bootstrap.css+bootstrap-paginator.js） 

<!--路徑根據自己項目修改--><link rel="stylesheet" href="/bootstrap/css/bootstrap.css" rel="external nofollow" ><script type="application/javascript" src="/js/jquery-3.2.1.min.js"></script><script type="application/javascript" src="/bootstrap/js/bootstrap.min.js"></script><script type="application/javascript" src="/bootstrap/js/bootstrap-paginator.min.js"></script>

<!--jsp頁面只需一個 ul 給定 class 和 id--><ul class="pagination" id="page"></ul>

JS 中列表頁面請求

各種非同步請求都適用（本例採用angular的 $http 請求）
options 是外掛程式的各項設定
bootstrapMajorVersion:3 版本聲明必須
onPageClicked:點擊頁數，page就是當前頁
itemTexts屬性將<<等符號替換為上一頁等文字（不寫也可以） 

$http.post('../userCtrl/getUsers').success(function (response) {  var pageCount = response.total;  $scope.users = response.users;  var options = {    currentPage: 1,    totalPages: (pageCount%10) == 0?(pageCount/10):(pageCount/10)+1,    numberOfPages:10,    bootstrapMajorVersion:3,    itemTexts: function (type, page, current) {      switch (type) {        case "first":          return "首頁";        case "prev":          return "上一頁";        case "next":          return "下一頁";        case "last":          return "末頁";        case "page":          return page;      }    },onPageClicked: function(event, originalEvent, type, page){      $.post(        "../userCtrl/getUsers",        {"page":page},        function (map) {          $scope.users = map.users;          $scope.$apply();        },        "json"      );    }  }  $('#page').bootstrapPaginator(options);}).error(function (response) {  alert("列表請求出錯");});

後台操作

分頁之後的資料
總記錄數或總頁數 

/** * 請求列表資料 * @return users */@RequestMapping("getUsers")public @ResponseBody Map<String,Object> selectUsers(Integer page){  if(page==null)page=1;//頁面第一次載入，預設為首頁  List<User> users = userService.selectUsers(page);  Integer total = userService.getTotal();//總記錄數  Map<String,Object> map = new HashMap<String,Object>();  map.put("users",users);  map.put("total",total);  return map;}

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。