angular实现表格的分页显示
最近项目中用到了一个功能，就是表格的分页显示。以前没整过，今天学会了，把它整理一下，下次可以直接用。
实例代码：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实现表格的分页显示的更多相关文章
- Word：表格无法分页显示
造冰箱的大熊猫@cnblogs 2019/1/30 今天遇到一个Word中表格无法分页显示的问题,特记录下来以备后查 我们知道,在Word中将表格不设置为“允许跨页断行”,假设表格中第二行某个单元格的 ...
- Django中使用JS通过DataTable实现表格前端分页，每页显示页数，搜索等功能
Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...
- elementui el-table根据分页显示表格序号
每页显示的序号都是一样的: <el-table :data="tableData" highlight-current-row @current-change="h ...
- SSRS(rdl报表)分页显示表头和对表头的冻结处理
基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...
- SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- 基于bootstrap3的 表格和分页的插件
如题 样式呢就是bootstrap3 的 功能呢就是实现表格和分页 (以上废话) 本来是自己没事儿写的一个js插件,曾经搁浅了一阵子,但最近由于公司项目的原因也需要这样的一个插件,所以就捡起来做了个可 ...
- 实例：SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- RDLC报表系列--------报表分页显示标题
RDLC表格标题分页后,标题不显示网上的办法也不少.怎奈我试过很多,只有这个可以解决.留下代码以后使用 将报表以 XML的方式打开,搜索找到“详细信息” 在这个位置 报表分页标题设置<Tabli ...
- easyui combogrid下拉表格的分页/按键/动态搜索
作者:xfl4629712 < easyui combogrid下拉表格的分页/按键/动态搜索 > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...
随机推荐
- POJ1185 炮兵阵地 —— 状压DP
题目链接:http://poj.org/problem?id=1185 炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Total Submissions ...
- ASP.NET MVC3中的路由系统
MVC中,用户访问的地址并不映射到服务器中对应的文件,而是映射到对应Control里对应的ActionMethod,由ActionMethod来决定返回用户什么样的信息.而把用户访问的地址对应到对应的 ...
- BZOJ 3398 [Usaco2009 Feb]Bullcow 牡牛和牝牛：dp【前缀和优化】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3398 题意: 约翰要带N(1≤N≤100000)只牛去参加集会里的展示活动,这些牛可以是牡 ...
- 网站桌面端和手机端不同url的设置
你的网站在搜索引擎中表现怎样很大程度上依赖于你的你的网站对于不同设备上的设计. 下面介绍了怎样基于URL构造来优化你的网站对于搜索引擎的支持. 决定你网页的URL构造 Determine the UR ...
- Dom vs Canvas (译)
原文:dom_vs_canvas 在web上做动画我们有很多选择:svg,dom,canvas,flash等等.但是根据业务场景我们一定能找到最优的技术解决方案,但是何时选择dom,何时使用canva ...
- IOC/DI控制反转与依赖注入
IOC/DI控制反转与依赖注入 IOC和DI表现的效果的是一样的只不过对于作用的对象不同,有了不一样的名字. 先用一个现实的例子来说明IOC/DI表现出来的效果.
- Gym-101630C：Connections（生成树&构造）
题意:给定N点,M条有向边,满足任意点可以到达任意点.现在叫你保留2*N边,任然满足任意点可以到达任意点,输出删除的边. 思路:从1出发,DFS,得到一颗生成树,有N-1条边.反向建题.还是从1出发, ...
- requirejs的打包工具r.js
不建议用命令行,还是用配置文件比较方便--build.js. 我的build.js文件内容大概如下: ( { appDir : './', baseUrl : './scripts', dir : ' ...
- SQL 优化总结（一）
查询速度慢的原因 查询速度慢原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建计算列导致查询不优化. ...
- SIP业务基本知识
1.SIP业务基本知识 1．1 业务介绍会话初始协议(Session Initiation Protocol)是一种信令协议,用于初始.管理和终止网络中的语音和视频会话,具体地说就是用来生成.修改和终 ...