Angularjs的真分頁，服務端分頁，后台分頁的解決方案

背景：項目的框架使用的是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;
        });
    };
});