很多分頁外掛在一個頁面中使用多個的時候都會出現一些問題（據說的，我還沒有什麼經驗），當然我在使用tm-pagination的時候也沒有跳過這個坑，先上個pagination最基礎的使用。其中有幾點需要注意的地方

1.外掛有兩個關鍵引數currentPage、itemsPerPage，當前頁碼和每頁的記錄數。

注：在一般使用情況下（即一個頁面中只需要一個分頁）只需要定義好這兩個引數就可以正常使用，如下：

$scope.paginationConf = {
    currentPage: 1,
    itemsPerPage: 20
}

2.這個外掛在使用時每次發生點選和變化時都會向後臺傳送一次請求，並不是一次請求所有資料後分頁載入（這個問題我不知道被百度上的哪篇文章誤導了，從一開始查問題就篤定地認為是前臺的問題，直到leader告訴我後臺也需要改動）。

3.當頁碼和頁面記錄數發生變化時監控後臺查詢，如果把currentPage和itemsPerPage分開監控的話則會觸發兩次後臺事件。

$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);

由於專案保密啥玩意亂七八糟的問題，我也粘不出來，盜用一下別人的程式碼

<div ng-app="DemoApp" ng-controller="DemoController">
    <table class="table table-striped">
        <thead>
            <tr>
                <td>ID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>Status</td>
                <td>Address</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="emp in persons">
                <td>{{emp.ID}}</td>
                <td>{{emp.FirstName}}</td>
                <td>{{emp.LastName}}</td>
                <td>{{emp.Status}}</td>
                <td>{{emp.Address}}</td>
            </tr>
        </tbody>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script type="text/javascript">
    var app = angular.module('DemoApp', ['tm.pagination']);
 
    app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {
 
        var GetAllEmployee = function () {
 
            var postData = {
                pageIndex: $scope.paginationConf.currentPage,
                pageSize: $scope.paginationConf.itemsPerPage
            }
            BusinessService.list(postData).success(function (response) {
                $scope.paginationConf.totalItems = response.count;
                $scope.persons = response.items;
            });
 
        }
 
        //配置分頁基本引數
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 5
        };
 
        /***************************************************************
        當頁碼和頁面記錄數發生變化時監控後臺查詢
        如果把currentPage和itemsPerPage分開監控的話則會觸發兩次後臺事件。
        ***************************************************************/
        $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
    }]);
 

到此，我們已經實現了一個頁面中的分頁功能，很好。

接下來就是一個頁面中使用多個分頁功能：需要把<tm-pagination conf="paginationConf"></tm-pagination>中conf的名字改變一下，然後就是有一些東西可能會顯示不出來，把下面的一些引數單獨地定義一下，但有一些屬性可能反而會影響到外掛顯示不出來，具體需要哪個就加上試一下吧，我遇到的問題是“每頁顯示多少行”的引數顯示不出來沒救只加個perPageOptions就好。

$scope.paginationConf = {
    currentPage: $location.search().currentPage ? $location.search().currentPage : 1,
    totalItems: 8000,
    itemsPerPage: 15,
    pagesLength: 15,
    perPageOptions: [10, 20, 30, 40, 50],
    onChange: function(){
        console.log($scope.paginationConf.currentPage);
        $location.search('currentPage', $scope.paginationConf.currentPage);
    }
};