Angularjs实现分页和分页算法

秒速五厘米 2022-05-19 05:52 348阅读 0赞

页面展示效果：

![Center][]

页面HTML代码：

<table class="table table-striped" style="margin: 0px;">  
     <thead>  
        <tr>  
            <td>选择</td>  
            <td>企业名称</td>                                 
            <td>企业地址</td>  
            <td>状态</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>  
  
<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("我是第一次加载");  
    \});  
    //获取数据  
    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;  
    \};

[Center]: /images/20220519/97cf9be93769451a86492828736a66a1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 SSM框架——实现分页和搜索分页

分页是JAVA WEB项目常用的功能，昨天在Spring MVC中实现了简单的分页操作和搜索分页，在此记录一下。使用的框架为（MyBatis+SpringMVC

本是古典何须时尚/ 2022年08月27日 07:59/ 0 赞/ 282 阅读

相关 PHP实现分页：文本分页和数字分页

来源：[http://www.ido321.com/1086.html][http_www.ido321.com_1086.html] 最近，在项目中要用到分页。分页功

左手的ㄟ右手/ 2022年08月13日 11:59/ 0 赞/ 395 阅读

相关分页实现

今天来说一下分页实现，我用的是mysql、jdbc、jsp去实现分页。 mysql使用limit而oracle使用的的是top去实现分页。首先是定义一个商品类，下面是代

我就是我/ 2022年07月12日 12:39/ 0 赞/ 337 阅读

相关 SSM框架——实现分页和搜索分页

分页是[Java ][Java]WEB项目常用的功能，昨天在[spring][] MVC中实现了简单的分页操作和搜索分页，在此记录一下。使用的框架为（MyBat

迷南。/ 2022年07月05日 15:26/ 0 赞/ 274 阅读

相关 Angular1.x实现分页和分页算法

页面HTML代码： 1.  <ul class="pagination" style="margin: 0px;" >

冷不防/ 2022年05月26日 13:10/ 0 赞/ 247 阅读

相关分页置换算法

常用的有三种：先进先出算法，最佳置换法，最近最少使用置换法。缺页：指页不在内存中，需要通过从外存置换到内存，例如，当初始状态时，内存为空，则访问到的页面都要从外存调入到内

Bertha 。/ 2022年05月21日 00:57/ 0 赞/ 221 阅读

相关 Angularjs实现分页和分页算法

页面展示效果： ![Center][] 页面HTML代码： <table class="table table-striped" style="margin: 0px;"

秒速五厘米/ 2022年05月19日 05:52/ 0 赞/ 349 阅读

相关 PageHelper分页插件和easyUI实现分页

场景需求：旧版mybatis分页的，要单独写一个获取总数的方法和查询一模一样（早就看它不顺眼），索性升级一下。。过程中也碰到了不少死胡同（想把自己打死）。但是使用很

深碍√TFBOYSˉ_/ 2022年05月10日 14:16/ 0 赞/ 441 阅读

相关 java分页算法

Java常用分页计算方法1 // 总条数 int totalRow = 101; // 每页记录数 int pageSize =

比眉伴天荒/ 2022年04月23日 14:52/ 0 赞/ 359 阅读

相关 angularJS实战(二)分页查询

需求如下：如何用angularJS来实现分页来查询? ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

妖狐艹你老母/ 2022年02月20日 12:38/ 0 赞/ 308 阅读