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;
}

1. 数据库分页
2. angularjs分页
3. MySQL数据库分页查询，Oracle数据库分页查询，SqlServer数据库分页
4. 分页数据库实现
5. sqlserver的数据库分页
6. 数据库分页查询
7. sqlserver 数据库分页
8. sybase数据库分页
9. Derby数据库分页
10. Mybatis中数据库分页
更多相关文章...
• SQLite 分离数据库 - SQLite教程
• PHP 数据库 ODBC - PHP教程
• Flink 数据传输及反压详解
• TiDB 在摩拜单车在线数据业务的应用和实践