angular -- 无刷新做分页
无刷新做分页参考地址：
http://www.jq22.com/demo/angular201707111100/
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://www.jq22.com/jquery/angular-1.4.6.js"></script>
<script type="text/javascript" src="http://www.jq22.com/demo/angular201707111100/js/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="http://www.jq22.com/demo/angular201707111100/css/bootstrap.min.css">
<style>
.panel{width:60%;margin:0 auto;text-align: center;}
.form-inline{width:60%;margin:0 auto;}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="panel">
<div class="row req form-inline">
<div class="col-md-8 col-md-offset-4 solid_top form-group">
<div class="pull-right">
<label>展示条数:
<select class="form-control" ng-change="change(selectedLimit)" ng-model="selectedLimit" ng-options="value.limit for value in values"></select>
</label>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<td>序号</td>
<td>模块</td>
<td>信息</td>
<td>时间</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<td>{{data.order}}</td>
<td>{{data.module}}</td>
<td>{{data.message}}</td>
<td>{{data.time}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row form-inline">
<div class="col-md-8">
<uib-pagination
total-items="page.totalCount"
ng-model="page.pageNo"
max-size="5"
class="samplePage pagination"
boundary-links="true"
force-ellipses="false"
first-text="首页"
last-text="末页"
previous-text="上一页"
next-text="下一页"
items-per-page="page.limit"
ng-change="pageChanged()"
boundary-link-numbers="true"
>
</uib-pagination>
</div>
<div class="col-md-4">
<input type="text" class="form-control" style="width:100px;margin:25px 0" name="" ng-model="go" />
<a class="btn btn-primary btn-sm" ng-click="setPage(go)">跳转</a>
</div>
</div>
<script type="text/javascript">
var allJson = {"total":20,"data":[
{
"order":10,"module":"模块10",
"message":"信息1",
"time":"2016-07-02"
},{
"order":9,"module":"模块9",
"message":"信息2",
"time":"2016-07-02"
},{
"order":8,"module":"模块8",
"message":"信息3",
"time":"2016-07-02"
},
{
"order":7,"module":"模块7",
"message":"信息4",
"time":"2016-07-02"
},{
"order":6,"module":"模块6",
"message":"信息5",
"time":"2016-07-02"
},
{
"order":5,"module":"模块5",
"message":"信息6",
"time":"2016-07-02"
},{
"order":4,"module":"模块4",
"message":"信息7",
"time":"2016-07-02"
},
{
"order":3,"module":"模块3",
"message":"信息8",
"time":"2016-07-02"
},{
"order":2,"module":"模块2",
"message":"信息9",
"time":"2016-07-02"
},
{
"order":1,"module":"模块1",
"message":"信息10",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息11",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息12",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息13",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息14",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息15",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息16",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息17",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息18",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息19",
"time":"2016-07-02"
},{
"order":1,"module":"模块1",
"message":"信息20",
"time":"2016-07-02"
}]
};
var pageApp = angular.module("app",['ui.bootstrap']);
pageApp.controller("ctrl",function($scope, $http){
/*$http({
method: 'GET',
url: 'test.json'
}).success(function (response) {
//总条数
$scope.total = response.total;
//反转函数转化abcd转dcba
$scope.data = response.data.reverse();
//选择显示的条数
$scope.values = [{"limit":3},{"limit":4},{"limit":5},{"limit":6},{"limit":7},{"limit":8}];
//默认显示的条数
$scope.selectedLimit=$scope.values[0];
//默认显示当前页数
$scope.currentPage = 1;
if($scope.data != null){
$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.currentPage-1),$scope.selectedLimit.limit*$scope.currentPage);
}else{
alert($scope.data);
}
$scope.page = {
"limit":$scope.selectedLimit.limit,"pageSize":5,"pageNo":$scope.currentPage,"totalCount":$scope.total};
})*/
//总条数
$scope.total = allJson.total;
//反转函数转化abcd转dcba
$scope.data = allJson.data.reverse();
//选择显示的条数
$scope.values = [{"limit":1},{"limit":1},{"limit":3},{"limit":4},{"limit":5}];
//默认显示的条数
$scope.selectedLimit=$scope.values[0];
//默认显示当前页数
$scope.currentPage = 1;
if($scope.data != null){
$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.currentPage-1),$scope.selectedLimit.limit*$scope.currentPage);
}else{
alert($scope.data);
}
$scope.page = {
"limit":$scope.selectedLimit.limit,"pageSize":5,"pageNo":$scope.currentPage,"totalCount":$scope.total};
//console.log($scope.data);
$scope.change = function(selectedLimit){
$scope.page.limit = selectedLimit.limit;
$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
}
$scope.pageChanged = function(){
$scope.page.limit = $scope.selectedLimit.limit;
$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
}
$scope.setPage = function (go) {
$scope.length = Math.ceil($scope.total/$scope.selectedLimit.limit);
console.log($scope.length);
if(go > $scope.length){
$scope.page.pageNo = $scope.length;
console.log($scope.length); }else{
$scope.page.pageNo=go;
}
$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
};
});
</script>
</body>
</html>
angular -- 无刷新做分页的更多相关文章
- Gridview各种功能+AspNetPager+Ajax实现无刷新存储过程分页 （留着用）
存储过程: GetProductsCount1: GetProductsByPage: ) * @PageSize) +' id from test)' exec sp_executesql @sql ...
- jquery.pagination.js数据无刷新真分页
定义一个全局的分页加载变量,并设置为true: var __isReSearch=true; 定义分页的一些数据: var __PageSize = 10; var __SearchCondition ...
- 【转】基于jquery的无刷新表格分页
效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...
- jQuery.pager无刷新分页
刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的. 直接上伪代码<样式代码省略,部 ...
- [转]Oracle分页之三：利用PagerView来实现无刷新GridView
本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018355.html 接上面一节,上面还存在问题就是分页控件使用的仍然是服务器端控 ...
- 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...
- TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页（转+自创）
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- MVC无刷新分页（即局部刷新，带搜索，页数选择，排序功能）
我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
随机推荐
- r画饼图
原始图样: library(ggplot2) dt = data.frame(A = c(2, 7, 4, 10, 1), B = c('B','A','C','D','E')) p = ggplot ...
- 关于Cocos2d-x中数据的存储
当局分数的打印和最高分数的记录 1.首先定义一个Label类型的节点在GameScene.cpp的init方法中,设置初始分数为0 _myScore = 0; scorelabel = Label:: ...
- imx6 android power off
调试android4.2的关机功能,希望再按下power按键长时间之后就关机.不弹出选框. 参考链接 http://www.cnblogs.com/sardine/archive/2011/07/26 ...
- ffmpeg 编解码详细过程
ffmpeg编解码详细过程 bobbypollo 转:ffmpeg编解码详细过程 原文地址:ffmpeg编解码详细过程(转)作者:心在飞翔原文出处: http://www.360doc.com ...
- php -- 静态变量
一般的函数内变量在函数结束后会释放,比如局部变量,但是静态变量却不会.下次再调用这个函数的时候,该变量的值会保留下来. 静态的变量的基本用法 1. 在类中定义静态变量 [访问修饰符] static $ ...
- KO 数据库分类系统介绍
KEGG Orthology数据库不仅对基因的功能进行了扩充和整理,还对功能进行了细致的分类: 针对基因的功能,共有3级分类,第一级有6个大类: 打开下面这个链接 http://www.genome. ...
- 3D游戏与计算机图形学中的数学方法-点线面
<易传·系辞上传>:”易有太极,是生两仪,两仪生四象,四象生八卦.” 借用一下古代先人们的智慧引一下本文的主题-三维图形中的点线面,在三维几何中也有一句话可以和上面的话相对应:由点成线,由 ...
- 【Java面试题】40 你所知道的集合类都有哪些？主要方法？
线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.本文试图通过简单的描述,向读者阐述各个类的作用以 ...
- 设置同样字体大小，chrome浏览器有时字体偏大的解决办法（转）
本文是找了在网上搜了好久才找到非常棒的一篇文章,很好的解决了这个问题. 原文地址:https://github.com/amfe/article/issues/10 这个特性被称做「Text Auto ...
- Razor------引入css文件的方法
MVC3.0之前版本: <link href=@Url.Content("~/Content/Styles.css") rel="stylesheet" ...