angularjs分页

var routerApp = angular.module('routerApp', ['routerApp.paging']);

/**
* 公共分页
*/
angular.module('routerApp.paging', [])
/***
*   html
*   <div id="history" class="page r">
*   ==============页面触发事件查询js=============start====
*   直接调用loadData(scope,data,params);
*   参数：scope:$scope
*       data:前台分页DTO
*       params:定义了
*          indexCss:"display:none;",//选填
*           liCss:"border:none;",//li的样式设置  选填
*           endCss:"display:none;",//尾页样式设置 选填
*           prev:"<",//上一页可自定义 选填
*           next:">",//下一页自定义 选填
*           totalCss:"display:none;",//总页数样式设置 选填
*           pageId:pageId,//对应页面的div id  必填
*           method:"queryHistoricalnet",//用于点击分页按钮时调用的函数名 动态分页必填
*           listType:'data',//需要展示的数组类型 选填
*           pageSize:10,//每页展示条数 选填
*           pageCount:5,//页码个数 选填
*           pageType:2//分页类型：1 动态分页 2 静态分页 (如果不填则是1) 静态分页必填
*   ==============页面触发事件查询js=============end====
*/
.factory("pageService",function($parse){
return {
loadData:function(scope,data,params){
loadData(scope,data,params);
}
};
//查询数据
function loadData(scope,data,params){
if(!data){
return;
}
//设置参数
if(params){
setParams(data,params);
}
//清除之前的分页内容
$("#"+data.pageId).children().remove();
$("#"+data.pageId).addClass("r");
if(!data[data.listType] || data[data.listType]=="null" ||  data[data.listType].length==0){
data[data.listType] = {};
$("#"+data.pageId).append($("<span> 没有查询到相应的数据</span>"));
$("#"+data.pageId).removeClass("r");
return;
}
var pageSpan=$("#pageId_"+data.pageId);
pageSpan=$('<ul id="pageId_'+data.pageId+'"></ul>');
$("#"+data.pageId).append(pageSpan);
//点击页码分页事件
event(scope,data);
var totalPages = "";//总页数
/*
* 判断是静态分页还是静态分页
* 默认是动态分页或者等于1时是动态分页
* 2 为静态分页
*/
if(data.pageType && "2"==data.pageType && data.tempArr.length==0){
var dataList = data[data.listType];
if(dataList && dataList.length>0){
if(dataList.length%data.pageSize==0){
totalPages = data.totalPages = dataList.length/data.pageSize;
}else{
totalPages = data.totalPages = parseInt(dataList.length/data.pageSize) + 1;
}
//将数组拆分成totalPages个
data.tempArr = getNewArray(dataList,data.pageSize);
data[data.listType]=[];
for (var j = 0; j < data.tempArr[0].length; j++) {
data[data.listType].push(data.tempArr[0][j]);
}
}
}else{
totalPages = data.totalPages;
}
if(totalPages<data.pageCount){
data.pageCount = totalPages;
}
setPageNumber(data);
var pageText="<li class='indexCSS' style='"+data.totalCss+"'>共 <span style='color:red;'>"+totalPages+"</span> 页</li>";
//动态定义分页所需元素
pageText+="<li tag='"+1+"' style='"+data.indexCss+"'>首页</li>";
pageText+="<li tag='"+(data.currentPage-1)+"' style='"+data.liCss+"'>"+data.prev+"</li>";
for (var i = 0; i < data.pageNumber.length; i++) {
if(data.pageNumber[i]==data.currentPage){
pageText=pageText+'<li tag="'+data.pageNumber[i]+'" class="selected" style="'+data.liCss+'">'+data.pageNumber[i]+'</li>';
}else{
pageText=pageText+'<li tag="'+data.pageNumber[i]+'" style="'+data.liCss+'">'+data.pageNumber[i]+'</li>';
}
}
pageText+="<li tag='"+(data.currentPage+1)+"' style='"+data.liCss+"'>"+data.next+"</li>";
pageText+="<li tag='"+data.totalPages+"' style='"+data.endCss+"'>尾页</li>";
pageSpan.append(pageText);
if(totalPages==1){
$("#"+data.pageId).children().remove();
}
};
function event(scope,obj){
$("#pageId_"+obj.pageId).bind('click',function(e){
e = e || window.event;
var target = e.target || e.srcElement;
// 不是<li>标签就返回
if(target.nodeName !== 'LI' || $(target).hasClass("indexCSS")) {
return;
}
var tag = parseInt($(target).attr("tag"));
if(tag==0||tag==obj.totalPages+1){
return;
}
obj.currentPage = tag;
if(obj.pageType && "2"==obj.pageType){
scope.$apply(function() {
obj[obj.listType] = [];
for (var i = 0; i < obj.tempArr[obj.currentPage-1].length; i++) {
obj[obj.listType].push(obj.tempArr[obj.currentPage-1][i]);
}
loadData(scope,obj);
});
}else{
scope.$apply(function() {
var getter = $parse(obj.method);
getter(scope);
});
}
if(typeof e.preventDefault === 'function') {
e.preventDefault();
e.stopPropagation();
}else {
e.returnValue = false;
e.cancelBubble = true;
}
});
}
/**
*将数组分割成新的数组[二维数组]
*@param myArray 需要分割的数组
*@param size    分割每个子数组的长度
*/
function getNewArray(myArray,size){
var len=parseInt(myArray.length/size);
var remain=myArray.length%size;
var my_array=[],sot=remain>0?len+1:len;
for ( var f = 1; f <=sot; f++) {
var start=size*(f-1);
var end=(f>len)?((f-1)*size+remain):f*size;
var mylocates=myArray.slice(start,end);
my_array.push(mylocates);
}
return my_array;
}
function setPageNumber(data){
data.pageNumber = new Array();//页码
if(data.currentPage<=data.totalPages-data.pageCount){
for (var i = 0; i < data.pageCount; i++) {
data.pageNumber[i]= data.currentPage+i;
};
}else{
for (var i = data.pageCount-1; i >= 0; i--) {
data.pageNumber.push(data.totalPages-i);
};
}
}
//参数设置
function setParams(data,params){
data.tempArr = new Array();//静态分页专用：临时数组
data.pageSize=params && params.pageSize?params.pageSize:10;
data.pageCount=params && params.pageCount && params.pageCount>0 && params.pageCount<10 ? params.pageCount:5;
data.pageType=params && params.pageType ? params.pageType:1;
data.listType =params &&  params.listType ? params.listType : "data";
data.pageId = params.pageId;
data.currentPage = data.currentPage ? data.currentPage : 1;
data.method = params && params.method ? params.method : "";
//样式赋值
data.liCss = params && params.liCss ? params.liCss : "";
data.indexCss = params && params.indexCss ? params.indexCss : "";
data.endCss = params && params.endCss ? params.endCss : "";
data.totalCss = params && params.totalCss ? params.totalCss : "";
data.prev = params && params.prev ? params.prev : "上一页";
data.next = params && params.next ? params.next : "下一页";
}
});

/*前端分页*/
.page {padding-bottom: 5px;}
.page li{padding: 4px 10px;font-size: 14px; border: 1px solid #d2d2d2; float: left; margin-right: 10px;cursor:pointer}
.page li.selected{ color: #ff6600;border: 1px solid #fff}
.page .indexCSS{padding: 4px 10px;font-size: 14px; float: left; border: none;cursor:default;}

angularjs分页相关推荐

AngularJS分页显示的简单案例
由于我下载的anjularJs是1.3的,所以有些代码会和1.5以及之后的有些不同.虽然代码可能不同,但是分页思想还是差不多的. <body ng-app="myApp" n ...
angularjs实现的前端分页控件
angularjs实现的前端分页控件前言:之前写个一个jQuery的分页显示插件,http://blog.csdn.net/peakchen_90/article/details/52187175, ...
有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了...
写在前面说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...
ActiveMQ整合spring
主要讲解点: 使用ActiveMQ完成发短信功能(重点) 2.Kindeditor上传图片及图片管理器功能的实现(对应后台代码是重点, Kindeditor参照demo会用就行) 宣传活动的保存功能( ...
传智播客的云计算大数据课程表
云计算大数据基础班 1.Java语言入门基础班课程大纲所处阶段主讲内容技术要点学习目标第1阶段: Java语言入门 1.计算机基础知识 1.计算机基础:2.DOS常用命令:3.Java概述 ...
nodejs爬虫项目（二）
之前已经爬取了多个网站的新闻数据,现在要对这些数据进行整理展示,具体要求如下首先第一步要在final-project文件夹下npm install安装依赖包这里我在安装过程中遇见了问题,安装一直失 ...
html分页自动加载数据库,AngularJS实现分页显示数据库信息
接着第一篇<>AngularJS内建服务$location及其功能详解>,进行学习 Section 2:实现分页显示效果那么再隐身一下,通过location的setter方法设置当 ...
AngularJs创建自己的Grid–分页组件
我把这个组件命名为tm.pagination,原因是因为起名真的太难起了.而且我网名也叫天名, TM就这样了吧.github地址https://github.com/miaoyaoyao/Angula ...
AngularJS自定义指令详解（有分页插件代码）
前言除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...

angularjs分页

angularjs分页相关推荐

最新文章

热门文章