最近项目中用到了一个功能，就是表格的分页显示。以前没整过，今天学会了，把它整理一下，下次可以直接用。

　　　　实例代码：https://github.com/dreamITGirl/projectStudy

参考博客:http://www.cnblogs.com/cyclone77/p/5381278.html

这是我要实现的表格的分页及其显示

这个demo 中有一个小问题，就是在点击首页后所有的页码全部显示出来，并没有按之前的显示5个页码。

　　　　把代码贴一下，有不足的地方，希望看到的朋友提出来，便于改正

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>angular实现表格的分页与显示</title>

    <script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>

    <script type="text/javascript" src="../js/angular.js"></script>

    <link rel="stylesheet" href="../css/bootstrap.min.css"/>

    <style type="text/css">

        ul {

            list-style: none;

            display: flex;

            justify-content: flex-end;

            margin-right: 100px;

        }

        .pageList-item {

            border: 1px solid #DDDDDD;

            padding: 5px;

            margin: 5px;

        }

        table th {

            text-align: center;

        }

        .active {

            color: #C9302C;

            border: none;

        }

        a {

            cursor: pointer;

        }

    </style>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

<table border="" cellspacing="" cellpadding="" class="table" style="text-align: center;">

    <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>性别</th>

        <th>民族</th>

    </tr>

    <tr ng-repeat="item in items">

        <td>{{item.name}}</td>

        <td>{{item.age}}</td>

        <td>{{item.sex}}</td>

        <td>{{item.national}}</td>

    </tr>

</table>

<footer class="footer">

    <ul class="pageList">

        <li class="pageList-item" ng-click="firstPage()">首页</li>

        <li class="pageList-item" ng-click="previousPage()">上一页</li>

        <li class="pageList-item" ng-repeat="pages in pageList" ng-class="{active: isActive(pages)}">

            <a href="" ng-click="selectPage(pages)">{{pages}}</a></li>

        <li class="pageList-item" ng-click="nextPage()">下一页</li>

        <li class="pageList-item" ng-click="lastPage()">尾页</li>

        <li class="pageList-item">总页数{{pageNumbers}}</li>

    </ul>

</footer>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myCtrl", function ($scope, $http) {

        $http({

            method: "GET",

            url: "http://127.0.0.1:8020/projectStudy/json/data.json"

        }).then(function successCallBack(response) {

            $scope.peopleList = response.data.peopleList;

            console.log($scope.peopleList);

            $scope.pageTotal = $scope.peopleList.length;

            $scope.pageSize = 5;

            $scope.pageNumbers = Math.ceil($scope.pageTotal / $scope.pageSize);

            $scope.newPages = $scope.pageNumbers > 5 ? 5 : $scope.pageNumbers;

            $scope.pageList = [];

            $scope.selPage = 1;

//					设置数据源分页

            $scope.setData = function () {

                $scope.items = $scope.peopleList.slice($scope.pageSize * ($scope.selPage - 1), ($scope.selPage * $scope.pageSize))

            }

            $scope.items = $scope.peopleList.slice(0, $scope.pageSize);

            //循环数据

            for (var i = 0; i < $scope.pageNumbers; i++) {

                $scope.pageList.push(i + 1)//页码的显示

            }

            //打印当前选中也的索引

            $scope.selectPage = function (page) {

                if (page < 1 || page > $scope.pageNumbers) return;

                if (page > 2) {

                    var newPageList = [];

                    for (var i = (page - 3); i < ((page + 2) > $scope.pageNumbers ? $scope.pageNumbers : (page + 2)); i++) {

                        newPageList.push(i + 1);

                    }

                    $scope.pageList = newPageList;

                }

                $scope.selPage = page;

                $scope.setData();

                $scope.isActive(page);

            }

            $scope.isActive = function (page) {

                return $scope.selPage == page

            }

            //点击上一页

            $scope.previousPage = function () {

                $scope.selectPage($scope.selPage - 1)

            }

            //点击下一页

            $scope.nextPage = function () {

                $scope.selectPage($scope.selPage + 1)

            }

            //点击首页

            $scope.firstPage = function () {

                $scope.selectPage(1);

                $scope.pageList = [];

                //循环数据

                for (var i = 0; i < $scope.pageNumbers; i++) {

                    $scope.pageList.push(i + 1)//页码的显示

                }

            }

            //点击尾页

            $scope.lastPage = function () {

                console.log($scope.pageNumbers)

                $scope.selectPage($scope.pageNumbers)

            }

        }, function errorCallBack(response) {

        })

    })

</script>

</body>

</html>

　　

　　　　

angular实现表格的分页显示的更多相关文章

  1. Word：表格无法分页显示

    造冰箱的大熊猫@cnblogs 2019/1/30 今天遇到一个Word中表格无法分页显示的问题,特记录下来以备后查 我们知道,在Word中将表格不设置为“允许跨页断行”,假设表格中第二行某个单元格的 ...

  2. Django中使用JS通过DataTable实现表格前端分页，每页显示页数，搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  3. elementui el-table根据分页显示表格序号

    每页显示的序号都是一样的: <el-table :data="tableData" highlight-current-row @current-change="h ...

  4. SSRS(rdl报表)分页显示表头和对表头的冻结处理

    基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...

  5. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  6. 基于bootstrap3的 表格和分页的插件

    如题 样式呢就是bootstrap3 的 功能呢就是实现表格和分页 (以上废话) 本来是自己没事儿写的一个js插件,曾经搁浅了一阵子,但最近由于公司项目的原因也需要这样的一个插件,所以就捡起来做了个可 ...

  7. 实例：SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  8. RDLC报表系列--------报表分页显示标题

    RDLC表格标题分页后,标题不显示网上的办法也不少.怎奈我试过很多,只有这个可以解决.留下代码以后使用 将报表以 XML的方式打开,搜索找到“详细信息” 在这个位置 报表分页标题设置<Tabli ...

  9. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

随机推荐

  1. Qt — 子窗体操作父窗体中的方法

    父窗体与子窗体各自的代码如下: 1.  父窗体的代码: void FartherWindow::addactions() { SubWindow subwindow(this); // 把父窗体本身t ...

  2. Flash+XML前后按钮超酷焦点图

    在线演示 本地下载

  3. 如何设置确认selinux 模式【转】

    本文转载自:http://blog.csdn.net/lei1217/article/details/48377109 [Description]linux SELinux 分成Enforce 以及 ...

  4. Uncaught TypeError: Illegal invocation解决

    jquery中报了这个错,仔细一看,有个使用ajax的地方,其中有个参数是从页面某个文本框获取的,本应该 $('#id').value ,被我写成了 $('id') .所以报错,目前已解决.

  5. (5)表单Action后台验证

    /day31/src/cn/itcast/web/struts2/user/UserAction.java package cn.itcast.web.struts2.user; import com ...

  6. matlab写txt文件

    fd=fopen('C:\Users\Qin\Desktop\1112.txt','w');for i=16:19 for j=1:5 fprintf(fd,'%f,%f\r\n',[cluster( ...

  7. 前端多媒体（2）—— xhr异步接收处理二进制数据

    有时我们需要把远程的视频.图片数据异步下载下来,然后在js里进行特殊处理.比如把VR的图片特殊处理,把不同封装格式的视频做一次 转封装 处理等等,这类操作都要先获取二进制数据,然后特殊处理. 这个时候 ...

  8. linux 进程学习笔记-进程退出/终止进程

    <!--[if !supportLists]-->Ÿ <!--[endif]-->退出/终止进程 void _exit(int status) 与 void exit(int ...

  9. 理解YOLOv2训练过程中输出参数含义

    原英文地址: https://timebutt.github.io/static/understanding-yolov2-training-output/ 最近有人问起在YOLOv2训练过程中输出在 ...

  10. VijosP1100:加分二叉树

    描述 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第i个节点的分数为di,tree及它的每个子树都有一 ...