ANGULARJS implementation of paging and paging algorithms

Page Display effect:

Page HTML code:

<table class= "Table table-striped" style= "margin:0px;" > <thead><tr><td> Select </td><td> Company name </td> <td> Business Address &LT;/TD&GT;&LT;TD > Status </td></tr></thead><tbody><tr ng-repeat= "L in List" ><td><input type= " Radio "name=" id "ng-click=" SELECT (l.id) "value=" {{l.id}} "/></td><td>{{l.name}}</td><td >{{l.address}}</td><td>{{l.status_str}}</td></tr></tbody></table><!- -Paging--><ul class= "pagination" style= "margin:0px;" ><li ng-class= "{true: ' disabled '}[p_current==1]" ><a href= "javascript:void (0);" ng-click= "P_index ()" > Home </a></li><li ng-repeat= "page in pages "Ng-class=" {true: ' active '}[p_current==page] "><a href=" javascript:void (0); "ng-click=" Load_page (page) ">{ {Page}} </a></li><li ng-class= "{true: ' disabled '}[p_current==p_all_page]" ><a href= "javascript:void (0 ); "ng-click=" P_last ()"> Last </a></li></ul><span style=" VERTICAL-ALIGN:12PX; >   Total: {{count}} bar </span>

JS Code:

var app = Angular.module ("myApp", []); App.controller ("Map_ctrl", Function ($scope, $http, $location) {//config $scope.count = 0; $scope. p_pernum = 10;//Variable $scope.p_current = 1; $scope. p_all_page =0; $scope. pages = [];//Initialize first page _get ($scope. P_current, $scope. P_pernum,function () {alert ("I am the first time to load");}); /Get data var _get = function (page,size,callback) {$http. Get ("xxx.html?status=0&page=" +page+ "&size=" +size). Success (function (res) {if (res&&res.status==1) {$scope. count=res.count; $scope. list=res.list; $scope. p_ current = page; $scope. P_all_page =math.ceil ($scope. count/$scope. P_pernum); Reloadpno (); callback ();} Else{alert ("Load Failed");}}); radio button to select $scope.select= function (ID) {alert (ID);} Home $scope.p_index = function () {$scope. Load_page (1);} Last $scope.p_last = function () {$scope. Load_page ($scope. p_all_page);} Load a page $scope.load_page = function (page) {_get (page, $scope. P_pernum,function () {});};/ /Initialize page number var reloadpno = function () {//Paging algorithm for (var i = 1; I <= $scope. p_all_page; i++) {if (i = = 2 && $scope. P_cu Rrent-6 > 1) {i = $scope. p_current-6;} else if (i = = $scope. p_current + 6 && $scope. p_current + 6 < $scope. p_all_page) {i = $scope. p_all_page-1;}   else{$scope. Pages.push (i);} }}; });

Paging algorithm:

var paging = function (current,allpage) {var html = "";//Paging Algorithm for   (var i = 1; I <= allpage; i++) {if (i = = 2 && Current-6 > 1) {i = current-6;} else if (i = = current + 6 && current + 6 < allpage) {i = allpage-1;} Else{if (current==i) {//indicates that the page is selected html+= <li class= ' active ' ><a href= ' xxx.html?p= ' +i+ ' > ' +i+ ' </a>< /li> ";} else{//the page is not selected html+= "<li><a href= ' xxx.html?p=" +i+ "' >" +i+ "</a></li>";}}   }   return html;};

Paging algorithm is the key Oh!! Just started to contact Angularjs too advanced also don't understand! Also please magnanimous O (∩_∩) o haha

Original: Http://blog.csdn.net/qilin001cs

ANGULARJS implementation of paging and paging algorithms