JAVA高级面试进阶训练营视频教程

admin

背景：项目的框架使用的是Angularjs，在做数据展示的时候，使用的是ng-table。用过ng-table的人都知道，他是自带分页的，默认分页方式是假分页。也就是一口气把所有的数据从数据库里取出来，然后再进行分页。这样做的好处是，在分页时候，不需要频繁访问数据库，减少数据库压力。同时，也能够提高翻页速度，提升用户体验。这些功能都是自带的，对于开发人员只要做一些简单的配置就好了。节约不少开发时间。这种方式在数据不多，查询不慢的情况下，效果很好，但是一旦数据多，查询慢了，体验会很差。就好比我这次，本身查询就会有些慢，再加上数据有几万条。所以ng-table每一次加载需要1分钟的时间。用户体验很差。所以，让我考虑使用服务端分页。

遇到的问题：网上查了很多资料，自己也试了很多。有件事情想要说下。经过我个人测试，发现ng-table是无法做到服务端分页的。之前还天真的以为，通过ng-table的一些配置，加上Angularjs的watch方法，对页码进行监听。就可以进行分页。后来发现这样的想法有一个无法跨过的坎。那就是，ng-table的数据和它自带的分页控件是强关联的。什么意思？

打个比方，如果我一页10行，当我翻到第二页的时候，显示的是第11-第20条数据。如果是服务端的分页方式，我就需要把页码设置在第二页，数据则是从服务端取出第11-第20条。其实，我提供给ng-table的数据源里面只有10条数据。所在设置的时候，虽然我可以将页码设置成第二页。但是，ng-table在取数据的时候，会取他数据集里面的第11-第20条，可因为，我是服务端的分页方式，其实数据集中只有10条数据。它是根本无法取到数据集中第11-第20条数据的。所以，ng-table的页码和数据集是紧密关联。无法分开单独设置。这也就是为什么，他不能做服务端分页的原因。

--以上是我自己总结的结果，如果大家测试下来和我有不一样的结果，请大家指正----------------------------------------------------

解救方案：搜索了半天，有一个帖子给了我一点方向。http://www.cnblogs.com/sword-successful/archive/2015/06/28/4605222.html，网上有很多都是引用的这个方式，但是按照他上面说的方法，我是没有成功过。而且，下面的百度云盘也是无法使用的。不过，给我指明一个方向，就是使用tm.pagination.js插件。接下来说方法。

1. 下载tm.pagination.js，

2.在需要分页的html页面中，引用<script src="~/js/tm-pagination/tm.pagination.js"></script>，这里注意引用的先后顺序，是先引用angular.min.js，再引用tm.pagination.js，最后引用controller的js

3.在你html页面中，需要分页的table下面添加<tm-pagination conf="paginationConf"></tm-pagination>

 

4.注入tm.pagination.js，var app = angular.module('App', ['tm.pagination']); // 创建应用域,并且注入tm.pagination

5.编写访问数据的两个服务。一个是获取总页数，一个是条件，页码，每页的显示条数，获取数据的

app.factory('ListFactory', function ($http, $rootScope) {
    return {
        getList: function (condition) {
            return $http.get(baseAddress + "trust/GetResult?" + condition);
        },
        getListCount: function (condition) {
            return $http.get(baseAddress + "trust/GetResultCount?" + condition);
        }
    };

6.在Angularjs的controller中初始化，分页控件，并且编写分页方法。

// 在controller初始化的时候，注册ListFactory服务
app.controller('ListController', function ($window, $scope, $http, $location, $timeout, ListFactory) {
// 条件url
    $scope.urlCondition = "";

    // 查询数据结果集的总数量
    $scope.ListCount = 0;

    // json数据
    $scope.List = "";

    // 配置分页的基本参数，分页控件的初始化
    $scope.paginationConf = {
        currentPage: 1, // 当前页数
        totalItems: 0, // 一共多少条数据，和itemsPerPage决定一共会有几页
        itemsPerPage: 10, // 每页几条数据，和totalItems决定一共会有几页
        pagesLength: 15 
    };


    $scope.search = function () {

        // 条件url
        $scope.urlCondition = "";


        // 获取每个输入框的值var Name = $("#Name").val();
if (Name != '' && Name != null) {
            $scope.urlCondition += "EngName=" + Name + "&";
        }// 初始化json数据，每次点击查询按钮的时候，要清空一次数据集，否则页面会一直保留之前的一次查询数据
        $scope.List = "";
        $scope.paginationConf.totalItems = 0;
        $scope.paginationConf.onChange = function () {
            console.log($scope.paginationConf.currentPage);
        }

        // 获取总条数
        ListFactory.getListCount($scope.urlCondition).then(function successCallback(response) {
            // 当获取总页数成功时候，进行操作

            // 获取总页数
            $scope.ListCount = response.data;
            // 设置分页属性
            $scope.paginationConf.currentPage = 1;
            // $scope.paginationConf.totalItems = $scope.ListCount; // 这里注释掉设置totalItems的属性，放在第一次查询时候，再设置，原因是当设置了totalItems，分页控件就会出现，而这个时候，数据还没有出现，为了保持数据和分页控件一起出现，需要在后面进行设置
            $scope.paginationConf.itemsPerPage = 10;
            $scope.paginationConf.pagesLength = 15;
            // 设置每一次分页时候的查询动作
            $scope.paginationConf.onChange = function () {
                // 初始化json数据
                $scope.List = "";
                // 每一次分页获取数据
                ListFactory.getList(
                    $scope.urlCondition
                    + "CurrentPage=" + $scope.paginationConf.currentPage + "&"
                    + "PageSize=" + $scope.paginationConf.itemsPerPage + "&").then(function successCallback(response) {
                        $scope.List = response.data;
                    }).catch(function (response) {
                        $scope.error = "An Error has occured while Loading ! " + response.ExceptionMessage;
                    });
            }

            // 由于插件有一个bug，就是在绑定onChange方法时候，无法执行第一次查询，所以，这里需要手动进行，第一次初始化数据
            ListFactory.getList($scope.urlCondition
                    + "CurrentPage=" + $scope.paginationConf.currentPage + "&"
                    + "PageSize=" + $scope.paginationConf.itemsPerPage + "&").then(function successCallback(response) {
                        $scope.List = response.data;
                        // 当设置总行数的时候,分页栏就会出现,为了让分页栏和数据一起出现,所以放在这里设置
                        $scope.paginationConf.totalItems = $scope.ListCount;
                    }).catch(function (response) {
                        $scope.error = "An Error has occured while Loading ! " + response.ExceptionMessage;
                    });

        }).catch(function (response) {
            $scope.error = "An Error has occured while Loading ! " + response.ExceptionMessage;
        });
    };
});