一個基於Angularjs、layer的分頁指令__js

html代碼：

<table style="width:100%"><tr><td>總共:<span style="color:#12bdce;font-weight: bold;">{{total_pages}}</span>頁<span style="color:#12bdce;font-weight: bold;">{{total}}</span>條</td><td style="text-align:right;"><div layer-pages id="page_bar"  data-options="url: 'busMaintenanceItem/query.do',callback: 'getPageDataList', pageColor: '#12bdce',pageSize: '10', groups:'3',isSkip: false" style="margin-right: 0px;"></div></td></tr></table>

js回調方法：

//獲得當前頁面資料資訊(用於分頁指令回調)$scope.getPageDataList = function (pageInfo){ $scope.maintenanceItemList = pageInfo.data_list;// 資料 $scope.total = pageInfo.total;// 總條數 $scope.total_pages = pageInfo.total_pages;// 總條數}

具體分頁指令代碼

App.directive("layerPages", ['$rootScope', '$compile', 'Page', function($rootScope, $compile, Page) {     return {     restrict:'AE',         link: function (scope, elem, attrs) {       var page_id = attrs.id;       var options =eval('[{' + (attrs.options || '') + '}]')[0]       var url = options.url;// 資料介面       var page_color =options.pageColor;// 顏色       var page_groups = options.groups;// 連續分頁數       var page_size = options.pageSize;// 每頁顯示條數       var page_is_skip = options.isSkip;// 是否開啟跳頁       var callbackFun = scope.$eval(options.callback);// 回呼函數       if(!callbackFun || !typeof(callbackFun)=='function'){       return;                   }        var page_index = 0;              var param = {};       param._pageIndex = page_index;       param._pageSize = page_size;       Page.ajaxPost(url, param, function (resp) {       var data_list = resp.data.rows;       var total = resp.data.total;// 總頁數       var total_pages = Math.ceil(total % page_size == 0? total / pageSize: total / page_size);              var pageInfo = {};       pageInfo.data_list = data_list;       pageInfo.total = total;       pageInfo.total_pages = total_pages;       callbackFun(pageInfo); // 回調    laypage({     cont : page_id,     pages : total_pages,// 得到總頁數     skin : page_color,     skip : page_is_skip, // 是否開啟跳頁     prev : false, // 若不顯示，設定false即可     next : false, // 若不顯示，設定false即可     groups : page_groups, // 連續分頁數     curr: 1, // 初始化當前頁     jump : function(obj,first) {// 觸發分頁後的回調     /*obj是一個object類型。包括了分頁的所有配置資訊。     first一個Boolean類，檢測頁面是否初始載入。非常有用，可避免無限重新整理。*/if(!first){param._pageIndex = obj.curr - 1;Page.ajaxPost(url, param, function(resp) {var data_list = resp.data.rows;pageInfo.data_list = data_list;callbackFun(pageInfo);// 回調  });   }    }})    });   }   }}]);   

效果圖：