angularjs 數據庫分頁

時間 2019-11-24

原文原文鏈接

angularjs的服務端分頁解決方案，前端頁面採用angularjs和ui-bootstrap的分頁寫法，後端在服務器中作好分頁，其實也比較容易，作好如下幾點就行：javascript

頁碼發生變化時要觸發一個頁碼變化的方法，這樣才能發送請求找到下一個頁碼的內容css
保證每次發請求的參數要和第一次查詢的時候參數要一致，不然會混亂html
保證參數要正確，主要的應該是兩個參數，pageSize--> 每頁的大小，currentPage --> 當前的頁碼，把這兩個參數必定要傳到服務器前端
服務器數據庫中必定要作好分頁，通常狀況下能夠按照入庫時間倒序分頁，日期最近的在最前面，而後接收來自servlet的currentPage和pageSize參數，返回相應的數據，這樣在頁面上最近日期的就顯示在最前面了，這種作飯用戶體驗應該是最好的java

數據庫分頁的作法估計和用SQL語言是同樣的，我沒有作過SQL的分頁，咱們用的是MONGODB，ui-bootstrap分頁的代碼在ui-bootstrap的官方網站有很是詳細的代碼和範例，只是國內的網訪問那個網站很慢，並且頗有可能加載不出來，因此只能用V*P*N來查看官網內容，官網內容很是有用，不過pagination模塊的pageChanged() 方法在template中好像尚未定義出來，因此所有照搬ui-bootstrap的pagination好像不起做用，搞很差就作成了頁面分頁，而不是服務器分頁，就差了這一個關鍵的方法了。萬能的google，經過google我找到了一個自定義指令分頁，剛好包含了有pageChanged()方法，太好了，是在github上找到的，不過是用google找到的。若是是數據量少的話其實用頁面分頁徹底沒有問題，可是大量數據要傳到頁面的話確定要用數據庫分頁，不然大量數據會把瀏覽器搞崩潰的，並且搜索速度巨慢無比，嚴重影響用戶體驗。git

不說別的了，下面就來看代碼：angularjs

引用的js有：github

ng-pagination.js
ng-pagination.css

而後是完整的index.html樣例ajax

 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>index</title>
  <link href="../src/ng-pagination.css" rel="stylesheet" />
  <style type="text/css">
  body {
    padding: 20px 0 0 20px;
  }
  
  .pager {
    margin: 20px;
  }
  </style>
</head>

<body ng-app="app">
  <div ng-controller="demoCtrl">
    <div class="pager">
      <mypager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()"></mypager>
    </div>
    <div class="pager">
      <mypager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首頁" next-text="下一頁" prev-text="上一頁" last-text="尾頁"></mypager>
    </div>
    <div class="pager">
      <mypager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" show-goto="true"></mypager>
    </div>
    <div class="pager">
      <mypager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首頁" next-text="下一頁" prev-text="上一頁" last-text="尾頁" show-goto="true" goto-text="跳轉到"></mypager>
    </div>
  </div>
  <script src="../angularjs/angular-1.2.21.min.js"></script>
  <script src="../src/ng-pagination.js"></script>
  <script type="text/javascript">
  var app = angular.module('app', ['ng-pagination']);
  app.controller('demoCtrl', function($scope) {
    $scope.onPageChange = function() {
      // ajax request to load data
      console.log($scope.currentPage);
    };

    // set pagecount in $scope
    $scope.pageCount = 12;
  });
  </script>
</body>

</html>

原有的指令名稱是pager，因爲和ui-bootstrap 的 pager 衝突了，加載頁面會報錯，因此改爲了mypager，我試過把ui-bootstrap 的 pager 改掉，我要說這樣絕對不是好辦法，由於ui-bootstrap 的源代碼封裝得很好，不是高手不要去改，萬一改了個不應改的內容會麻煩死了的。數據庫

js中的內容：

 ;
(function(angular) {
  'use strict';
  angular.module("ng-pagination", [])
    .constant('ngPaginationConfig', {
      visiblePageCount: 10,
      firstText: 'First',
      lastText: 'Last',
      prevText: 'Prev',
      nextText: 'Next',
      showIfOnePage: false,
      showFirstLastText: true,
      gotoText: 'Goto Page',
      showGoto: false
    }).directive("mypager", ['ngPaginationConfig', function(ngPaginationConfig) {
      return {
        link: function(scope, element, attrs) {
          var visiblePageCount = angular.isDefined(attrs.visiblePageCount) ? attrs.visiblePageCount : ngPaginationConfig.visiblePageCount;
          scope.firstText = angular.isDefined(attrs.firstText) ? attrs.firstText : ngPaginationConfig.firstText;
          scope.lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : ngPaginationConfig.lastText;
          scope.prevText = angular.isDefined(attrs.prevText) ? attrs.prevText : ngPaginationConfig.prevText;
          scope.nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : ngPaginationConfig.nextText;
          scope.showFirstLastText = angular.isDefined(attrs.showFirstLastText) ? attrs.showFirstLastText : ngPaginationConfig.showFirstLastText;
          scope.showIfOnePage = angular.isDefined(attrs.showIfOnePage) ? attrs.showIfOnePage : ngPaginationConfig.showIfOnePage;
          scope.gotoText = angular.isDefined(attrs.gotoText) ? attrs.gotoText : ngPaginationConfig.gotoText;
          scope.showGoto = angular.isDefined(attrs.showGoto) ? attrs.showGoto : ngPaginationConfig.showGoto;
          scope.currentPage = 1;

          scope.pageChange = function(page) {
            if (page >= 1 && page <= scope.pageCount) {
              scope.currentPage = page;
            } else {
              scope.currentPage = 1;
            }
          }

          scope.keyupHanlder = function(e) {
            var value = e.target.value;
            var parsedValue = parseInt(value, 10);
            if (!Number.isNaN(parsedValue)) {
              if (parsedValue >= 1 && parsedValue <= scope.pageCount) {

              } else if (parsedValue < 1) {
                e.target.value = 1;
              } else {
                e.target.value = scope.pageCount;
              }
              if (e.keyCode === 13) {
                // pressed enter
                scope.currentPage = parsedValue;
              }
            } else {
              if (e.preventDefault) {
                e.preventDefault();
              } else {
                return false;
              }
            }
          }

          function build() {
            var low,
              high,
              v;

            scope.pagenums = [];

            if (scope.pageCount === 0) {
              return;
            }
            if (scope.currentPage > scope.pageCount) {
              scope.currentPage = 1;
            }

            if (scope.pageCount <= visiblePageCount) {
              low = 1;
              high = scope.pageCount;
            } else {
              v = Math.ceil(visiblePageCount / 2);
              low = Math.max(scope.currentPage - v, 1);
              high = Math.min(low + visiblePageCount - 1, scope.pageCount);

              if (scope.pageCount - high < v) {
                low = high - visiblePageCount + 1;
              }
            }

            for (; low <= high; low++) {
              scope.pagenums.push(low);
            }
          }

          scope.$watch('currentPage+pageCount', function() {
            build();
            scope.onPageChange();
          });
        },
        replace: true,
        restrict: "E",
        scope: {
          pageCount: '=',
          currentPage: '=',
          onPageChange: '&'
        },
        template: '<div class="ng-pagination"><ul ng-if="pageCount>1 || showIfOnePage"><li ng-click="pageChange(1)" ng-if="showFirstLastText">{{firstText}}</li>' +
          '<li ng-click="pageChange(currentPage-1>0?currentPage-1:1)">{{prevText}}</li>' +
          '<li ng-repeat="pagenum in pagenums track by pagenum" ng-click="pageChange(pagenum)" ng-class="{active:currentPage===pagenum}">{{pagenum}}</li>' +
          '<li ng-click="pageChange(currentPage+1<=pageCount?currentPage+1:pageCount)">{{nextText}}</li>' +
          '<li ng-click="pageChange(pageCount)" ng-if="showFirstLastText">{{lastText}}</li></ul>' +
          '<lable ng-if="showGoto">{{gotoText}}<input type="text" ng-keyup="keyupHanlder($event)"></label></div>'
      }
    }]);
})(angular);

css中的內容：

 .ng-pagination {
  font-family: 'Microsoft YaHei';
  font-size: 12px;
  color: #337ab7;
}

.ng-pagination>ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.ng-pagination>ul>li {
  padding: 6px 12px;
  margin-right: 5px;
  border: 1px solid #ddd;
  display: inline-block;
  cursor: pointer;
  border-radius: 2px;
  background: #fff;
}

.ng-pagination>ul>li:hover,
.ng-pagination>ul>li.active {
  background-color: #eee;
  color: #23527c;
}

.ng-pagination input {
  margin-left: 2px;
  width: 30px;
  border-radius: 2px;
  border: 1px solid #ddd;
  vertical-align: 1px;
  text-align: center;
  padding: 6px 3px;
}