JavaScript EasyPager 分页函数

代码如下:

var EasyPager = function(wrap,pageCount,currPage){
var d = document
,el = function(tag,inner,click,css){
tag = d.createElement(tag);
inner && (tag.innerHTML = inner);
click && (tag.onclick = click);
css && (tag.className=css);
return tag;
}
,append = function(parent,children,child){
children = [].concat(children);
for(var i=0,j=children.length;i<j;i++){
child = children[i];
child && parent.appendChild(child);
}
return parent;
}
,easyFn = function(n){return function(){EasyPager(wrap,pageCount,n)}}
,box = el("div"),firstPage,prevPage,lastPage,nextPage,startNum,endNum,pages= [];

currPage!=1 && (firstPage = el("span","<<",easyFn(1)),prevPage = el("span","<",easyFn(currPage-1)));
currPage!=pageCount && (lastPage = el("span",">>",easyFn(pageCount)),nextPage = el("span",">",easyFn(currPage+1)));
(pageCount<=10) ? (startNum=1,endNum=pageCount) : (startNum=currPage-4,endNum = currPage+5,(currPage<=5) && (startNum=1,endNum=10),(currPage>=pageCount-5)&&(endNum=pageCount,startNum=pageCount-10+1));
for(var i=startNum;i<=endNum;i++)pages.push(el("span",i,easyFn(i),i==currPage?"currSpan":null))

append((wrap.innerHTML="",wrap),append(box,[firstPage,prevPage].concat(pages).concat(nextPage,lastPage)));
};

时间: 2011-05-23

javascript 支持页码格式的分页类

但是他们插件的附属功能很多又不需要,而且没必要就为了这么一个功能区引用这个库,为速度考虑吧,当然你服务器好也行,但是其实这个效果不是必须的,但是觉的会常用,所以就包装成类了,供以后使用,也供有需要的人学习使用. 下面只是一个简单的demo,用的话自己可以在编辑页码样式,有默认的格式.不废话了,自己看吧,有注释使用说明...类(3kb)使用可以参照demo,不明白使用的可以留言. 以后会慢慢写一些项目开发中常遇到的问题,以及解决方案,和大家学习分享. jpage.js 复制代码 代码如下: /*

javascript实现json页面分页实例代码

下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来 下面直接代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

javascript ajax 仿百度分页函数

复制代码 代码如下: /** * Ajax分页功能 * 在需要分页的地方添加<ul class="pagination"></ol> * 作为分页组件容器元素. * pageCount 总页数 * currentPage 当前页数 * container 带有pagination类的ol容器元素 * loadData 用于加载数据的函数 * version 1.0 */ pagination : function(pageCount, currentPage,

JavaScript分页功能的实现方法

本文实例讲述了JavaScript分页功能的实现方法.分享给大家供大家参考.具体实现方法如下: <script> //定义page为全局变量,以便下面使用 var page; window.onload = function() { var table = document.getElementById("table"); var btnAdd = document.getElementById("btnAdd"); var btnModify = do

javascript分页代码实例分享(js分页)

调用: 复制代码 代码如下: var pageChange = function (index) {            var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });        } 实现: 复制代码 代码如下: pager = function (divPager, pageIndex, pageSize, totalCount, page

javascript分页代码(当前页码居中)

复制代码 代码如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //总的页数 var showPageNum = opt.showPageNum; //显示的页数 var curpageNum = opt.curpag

纯JavaScript实现的分页插件实例

本文实例讲述了纯JavaScript实现的分页插件.分享给大家供大家参考.具体如下: //总条数(必填) var Num=Number(<?php echo $count;?>) //当前页(必填) var index = Number(<?php echo $page;?>); /* //每页的条数(可选,默认每页10条) */ var pageNum=Number(10); /* //最大显示的页码的数目(可选,默认显示5个页码,页码数目必须大于等于1) */ var maxP

JavaScript实现列表分页功能特效

最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚.最终实现的效果是:上一页.第一页.-(上n个页码).n个页码.-(下n个页码).最后一页.下一页.n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5.写的时候,主要注意了以下几个地方: 页码等于1时,只显示上一页.第一页.最后一页,且都没有跳转: 页码小于等于2时,不需要中间的n个页码: 页码小于等于n时,显示所有页码,不显示2个"-": 2个"-"换页时,换n个页

javascript实现炫酷的拖动分页

javascript实现炫酷的拖动分页 js <html> <head> <title>拖动分页</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> body{ border:0px; margin:0px; overflow:hidden; background-color:transparent;

原生javascript实现的分页插件pagenav

这一款是用原生javascript实现的分页插件pagenav,页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码,调用时可根据需要先重写go方法.(已去除jquery依赖).... 插件代码如下: /* ************************** author:Keel (keel.sike@gmail.com) ************************** 页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码. 调用时可根据需要先重

JavaScript制作简单分页插件

简介 兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页. 使用 Browser <link rel="stylesheet" href="css/GB-paging.css"> <script src="js/GB-paging.js"></script> 普通分页 HTML <div id="gbpaging" class="gb-paging">

laypage.js分页插件使用方法详解

本文实例为大家分享了laypage.js分页插件的使用方法,供大家参考,具体内容如下 1.引用依赖 a.layui.js b.layui.css c.laypage.js 2.HTML代码部分 <div id="page-nav" style="float: right"></div> 3.js代码部分 <script> $(function(){ //加载菜单列表数据 menuPageData(); }); function m

基于twbsPagination.js分页插件使用心得(分享)

项目中之前需要分页插件,以前用的都是单纯叫做pagenation.js的插件,但是这次集成的时候,项目组一个孩纸用了这个插件,结合网上的例子琢磨了一把.其实大致流程都是相同的,主要将我在用这个分页插件的一些心得分享出来: 1.分页插件引入html中需要: bootstrap.css 分页插件js 自己写的分页的样式css[如果不用,也可以直接用bootstrap所带的分页css.] 使用jquery可以引入jquery.js html中: <script type="text/javasc

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能.现在单独做了个简易的小demo,主要是为了分享自己写的分页功能.注:本实例调用的是真实接口数据. 首先.小demo的目录结构如下: 一.代码部分 下面直接把每一个文件的代码贴出来,重点是ListCtrl.js和pageDirective.js: 1.index.html <!DOCTYPE html> <html lang="en" ng-app=&

基于Bootstrap3表格插件和分页插件实例详解

首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据 下面分页 使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

laypage前端分页插件实现ajax异步分页

本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下 function GetList(pageIndex) { var _this = "" var clone_this = ""; _this = $(".BindDataList");//数据列表容器, clone_this = _this.clone(true); var pageSize = 25;//每页展示的条数

根据Bootstrap Paginator改写的js分页插件

刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两种框架的方案就让我们自己做了... 刚开始在网上找了一下,觉得bootstrap-paginator的api暴露出来,修改一下就可以做成之前实习公司的那种了,但是觉得没有跳转,很奇怪,想要一个,就动手在github上把源码拿下来了,不得不说,这代码写得真是比我这些实习码农好太多.(之前实习公司的组长

jQuery Pagination分页插件使用方法详解

本文实例为大家分享了jQuery Pagination分页插件的具体代码,供大家参考,具体内容如下 一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src=&quo