Angularjs實現(xiàn)分頁和分頁算法的示例代碼

更新時間：2016年12月23日 14:23:05 作者：972720606

分頁是很多web應用都會用到的，本篇文章主要介紹了Angularjs實現(xiàn)分頁和分頁算法的示例代碼，具有一定的參考價值，有興趣的可以了解一下。

對于大多數(shù)web應用來說顯示項目列表是一種很常見的任務。通常情況下，我們的數(shù)據會比較多，無法很好地顯示在單個頁面中。在這種情況下，我們需要把數(shù)據以頁的方式來展示。

頁面展示效果：

頁面HTML代碼：

<table class="table table-striped" style="margin: 0px;"> 
   <thead> 
    <tr> 
      <td>選擇</td> 
      <td>企業(yè)名稱</td>                
      <td>企業(yè)地址</td> 
      <td>狀態(tài)</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()">首頁</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()">尾頁</a></li> 
</ul> 
<span style="vertical-align: 12px;"> 共：{{count}} 條</span>

Js代碼：

var app = angular.module("myApp",[]);   
app.controller("map_ctrl",function($scope,$http,$location){ 
  //配置 
  $scope.count = 0; 
  $scope.p_pernum = 10; 
  //變量 
  $scope.p_current = 1; 
  $scope.p_all_page =0; 
  $scope.pages = []; 
  //初始化第一頁 
  _get($scope.p_current,$scope.p_pernum,function(){ 
    alert("我是第一次加載"); 
  }); 
  //獲取數(shù)據 
  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("加載失敗"); 
      } 
    });  
  } 
  //單選按鈕選中 
  $scope.select= function(id){ 
    alert(id); 
  } 
  //首頁 
  $scope.p_index = function(){ 
    $scope.load_page(1); 
  } 
  //尾頁 
  $scope.p_last = function(){ 
    $scope.load_page($scope.p_all_page); 
  } 
  //加載某一頁 
  $scope.load_page = function(page){ 
    _get(page,$scope.p_pernum,function(){ }); 
  }; 
  //初始化頁碼 
  var reloadPno = function(){ 
     $scope.pages=calculateIndexes($scope.p_current,$scope.p_all_page,8); 
    }; 
//分頁算法 
var calculateIndexes = function (current, length, displayLength) { 
  var indexes = []; 
  var start = Math.round(current - displayLength / 2); 
  var end = Math.round(current + displayLength / 2); 
  if (start <= 1) { 
    start = 1; 
    end = start + displayLength - 1; 
    if (end >= length - 1) { 
      end = length - 1; 
    } 
  } 
  if (end >= length - 1) { 
    end = length; 
    start = end - displayLength + 1; 
    if (start <= 1) { 
      start = 1; 
    } 
  } 
  for (var i = start; i <= end; i++) { 
    indexes.push(i); 
  } 
  return indexes; 
 }; 
  
});

分頁算法：

current ：當前頁碼，length：總頁碼，displayLength：顯示長度 @return array[1,2,3,4,5,6,7,8]

var calculateIndexes = function (current, length, displayLength) { 
  var indexes = []; 
  var start = Math.round(current - displayLength / 2); 
  var end = Math.round(current + displayLength / 2); 
  if (start <= 1) { 
    start = 1; 
    end = start + displayLength - 1; 
    if (end >= length - 1) { 
      end = length - 1; 
    } 
  } 
  if (end >= length - 1) { 
    end = length ; 
    start = end - displayLength + 1; 
    if (start <= 1) { 
      start = 1; 
    } 
  } 
  for (var i = start; i <= end; i++) { 
    indexes.push(i); 
  } 
  return indexes; 
};

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: