javascript 支持页码格式的分页类

但是他们插件的附属功能很多又不需要,而且没必要就为了这么一个功能区引用这个库,为速度考虑吧,当然你服务器好也行,但是其实这个效果不是必须的,但是觉的会常用,所以就包装成类了,供以后使用,也供有需要的人学习使用。

下面只是一个简单的demo,用的话自己可以在编辑页码样式,有默认的格式。不废话了,自己看吧,有注释使用说明。。。类(3kb)使用可以参照demo,不明白使用的可以留言。

以后会慢慢写一些项目开发中常遇到的问题,以及解决方案,和大家学习分享。

jpage.js


代码如下:

/* 排序工具 by Funny ZAk <silenceacegmail.com> 2009-8-23
"调用方式 var zp = new zakPage(参数);zp.init();
参数以此为 源内容容器,分页结果容器,导航容器,页大小,单挑内容回调函数返回li对象,每个li的样式,选择后的样式没有则为null或""
,默认起始页数,格式化页码显示格式*/
function zakPage(id,pagec,navid,pagesize,lievt,ds,ss,idx,navp){
    this.obj = this;
    this.pageid = id;
    this.pagec = pagec;
    this.navc = navid;
    this.pagesize = pagesize || 7;
    this.lievt = lievt || null;
    this.rcount = 0;
    this.pagecount = 0;
    this.cpage = 1;
    this.ds = ds;
    if(this.ds == null){this.ds = "";}
    this.ss = ss;
    if(this.ss == null){this.ss = "";}
    this.idx = idx;
    this.navpre = navp || ["共{$pcount}页/{$rcount}条,当前第{cpage}页","首页","上一页","下一页","末页"];
    }
zakPage.prototype = {
    init:function(){
        document.getElementById(this.pageid).style.display = "none";
        this.rcount = document.getElementById(this.pageid).getElementsByTagName("li").length;
        var residue = this.rcount%this.pagesize;
        var nums = parseInt(this.rcount/this.pagesize);
        this.pagecount = nums;
        if(residue != 0){this.pagecount = nums+1;}
        this.gopage(this.idx);
        },
    guide:function(){
        var nav = document.getElementById(this.navc);
        var np = this.navpre;
        nav.innerHTML = np[0].replace("{$rcount}",this.rcount).replace("{$pcount}",this.pagecount).replace("{cpage}",this.cpage);
        nav.appendChild(this.createa(np[1],1));
        nav.appendChild(this.createa(np[2],this.cpage-1));
        nav.appendChild(this.createa(np[3],this.cpage+1));
        nav.appendChild(this.createa(np[4],this.pagecount));
        },
    createa:function(html,index){
        var aa = document.createElement("a");
        aa.innerHTML = html;
        var o = this.obj;
        aa.onclick = function(){o.gopage(index);}
        return aa;
        },
    gopage:function(index){
        if(index>this.pagecount){index=1;}
        if(index<=0){index = this.pagecount;}
        this.cpage = index;
        var ghtml = document.getElementById(this.pagec);
        ghtml.innerHTML = "";
        var pages = (index-1)*this.pagesize;
        var pagee = pages+this.pagesize;
        if(pagee>this.rcount){pagee = this.rcount;}
        for(var i=pages;i<pagee;i++){
                var lil = document.createElement("li");
                lil.className = this.ds;
                lil.innerHTML = this.litem(i);
                var sss = this.ss;
                if(this.lievt !=null){
                    lil.lievt = this.lievt;
                    lil.onclick = function(){
                        this.lievt(this);
                        this.className = sss;
                        }
                    }
                ghtml.appendChild(lil);
            }
         this.guide();
        },
    litem:function(index){
            return document.getElementById(this.pageid).getElementsByTagName("li")[index].innerHTML;
        }
    }

下面是完整的测试代码,js已经包括在内

body {
text-align:center;
padding:20px 0 0 0;
font-size:12px;
}
a {
color:#000;
font-size:12px;
cursor:pointer;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.contain {
margin:0 auto;
width:825px;
text-align:left;
border:1px #000 solid;
padding:5px;
height:auto;
}
li.sd a,li.sd a:link,li.sd a:visited{background-color:#000; color:#FFF; font-size:13px;}

Jpage Demo - by funnyzak

/* 排序工具 by Funny ZAk 2009-8-23
"调用方式 var zp = new zakPage(参数);zp.init();
参数以此为 源内容容器,分页结果容器,导航容器,页大小,单挑内容回调函数返回li对象,每个li的样式,选择后的样式没有则为null或""
,默认起始页数,格式化页码显示格式*/
function zakPage(id,pagec,navid,pagesize,lievt,ds,ss,idx,navp){
this.obj = this;
this.pageid = id;
this.pagec = pagec;
this.navc = navid;
this.pagesize = pagesize || 7;
this.lievt = lievt || null;
this.rcount = 0;
this.pagecount = 0;
this.cpage = 1;
this.ds = ds;
if(this.ds == null){this.ds = "";}
this.ss = ss;
if(this.ss == null){this.ss = "";}
this.idx = idx;
this.navpre = navp || ["共{$pcount}页/{$rcount}条,当前第{cpage}页","首页","上一页","下一页","末页"];
}
zakPage.prototype = {
init:function(){
document.getElementById(this.pageid).style.display = "none";
this.rcount = document.getElementById(this.pageid).getElementsByTagName("li").length;
var residue = this.rcount%this.pagesize;
var nums = parseInt(this.rcount/this.pagesize);
this.pagecount = nums;
if(residue != 0){this.pagecount = nums+1;}
this.gopage(this.idx);
},
guide:function(){
var nav = document.getElementById(this.navc);
var np = this.navpre;
nav.innerHTML = np[0].replace("{$rcount}",this.rcount).replace("{$pcount}",this.pagecount).replace("{cpage}",this.cpage);
nav.appendChild(this.createa(np[1],1));
nav.appendChild(this.createa(np[2],this.cpage-1));
nav.appendChild(this.createa(np[3],this.cpage+1));
nav.appendChild(this.createa(np[4],this.pagecount));
},
createa:function(html,index){
var aa = document.createElement("a");
aa.innerHTML = html;
var o = this.obj;
aa.onclick = function(){o.gopage(index);}
return aa;
},
gopage:function(index){
if(index>this.pagecount){index=1;}
if(indexthis.rcount){pagee = this.rcount;}
for(var i=pages;i

  • Php 构造函数construct的前下划线是
  • PHP 读取文件内容代码(txt,js等)
  • PHP 用数组降低程序的时间复杂度
  • PHP 柱状图实现代码
  • Ajax+PHP边学边练 之五 图片处理
  • PHPMyadmin 配置文件详解(配置)
  • 又一个php 分页类实现代码
  • php 无限分类的树类代码
  • Asp.net 文本框全选的实现
  • php zip文件解压类代码
  • li>各种男女围巾围法图文

  • photoshop 鼠绘忧郁的少女头像
  • Photoshop 一只可爱的卡通小蜜蜂
  • Photoshop 调出美女质感的红紫色肤色
  • Photoshop 古典的油画效果处理方法
  • photoshop 利用滤镜及素材打造超酷的火焰字
  • photoshop 鼠绘漂亮的熟睡公主
  • Photoshop 华丽的金色宝石皇冠
  • Photoshop 粉红色的人物写真图片
  • Photoshop 漂亮的紫色人物签名效果
  • Photoshop 偏暗的圣诞美女美白
  • Photoshop 蓝色梦幻的潮流壁纸制作
  • Photoshop调色教程 人物淡灰色质感肤色
  • Photoshop 漂亮的圣诞彩球制作
  • Photoshop 简单的光照字效果
  • HTML/JS互相转换工具-IE7兼容版
  • css 在线压缩工具
  • CSS整形与最佳化工具[压缩]
  • JS Minifier js压缩
  • packer_至强的javascript在线加密工具
  • XHTML 代码嵌套查看工具[标签闭合]
  • 我们 在线进制转换 可以实现各类进制间
  • 在线JS脚本校验器检测js错误
  • 将html转换为php,javascript和asp的在线工具
  • 正则表达式30分钟入门教程
  • 正则表达式 基础资料
  • javascript 在线参考手册
  • vbscript微软官方参考手册
  • jQuery入门指南教程
  • asp 学习在线手册
  • php5最新中文参考手册
  • mysql
  • sql数据库学习
  • 常用广告代码
  • 百度近日收录查询
  • alexa排名查询
  • IP/域名WHOIS
  • 网页编辑器
  • QQ在线强制聊天工具 加强修正版
  • 迅雷 快车专用链接加密解密js代码
  • 在线繁简体字转换
  • html中文完全手册
  • qvod解密工具 马克思

function bb(a){alert(a.innerHTML);}
var arr = ["{$rcount}record,total{$pcount}page currenpage{cpage} "," indexpage"," prevpage "," nextpage "," lastpage "];
var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,null); //此为默认页码格式
//var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,arr); //自定义页码格式
zp.init();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

时间: 2009-12-08

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

js实现下一页页码效果

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; padding: 0; } .scroll-tool{ position: relative; height: 56px; padding: 12px 160px; background-color

某页码显示的helper 少量调整,另附js版

如果你只想下载现成的用,可以到这个页面上去找.许可证是"WTFPL",也就是"Do What The Fuck You Want To Public License". 源代码如下(因为有注释,就不另外说明了): 复制代码 代码如下: public static class PageNumExt { /// <summary> /// 使用传入的委托计算并产生友好的页码. /// </summary> /// <param name=&

js实现前端分页页码管理

用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是初始页面(也就是第一页)的界面,如果为第一页时,则首页和上一页按钮不可用,为了展示分页的效果,我当前的分页是一条一页. 这是页码大于5页时展示的效果:1,2页始终始终显示(考虑到用户体验) 这是最后一页的效果图: 下面直接上js代码: //页码显示 $(function(){ var dqPage

Bootstrap jquery.twbsPagination.js动态页码分页实例代码

Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.

bootstrap table表格插件之服务器端分页实例代码

Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头.单复选.排序.分页.搜索以及自定义表头等功能. 因公司的项目需要实现用户管理的表格实现,所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台. 示例截图: 客户端代码: //引入的css文件 <link href="../public/static/css/bootstrap.min.css" rel="external nofo

jquery实现输入框动态增减的实例代码

通过字符串拼接,将所有的输入框中的内容,用"1234235#34634234#123525"这样的格式拼接.网页端代码: 复制代码 代码如下: <form><table><tr><th>手机:</th>    <td style="padding:10px 0;">    <input type="hidden" name="user.mobile"

bootstrap+jQuery实现的动态进度条功能示例

本文实例讲述了bootstrap+jQuery实现的动态进度条功能.分享给大家供大家参考,具体如下: 此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progress-bar从而实现基本的进度条. b.在外层<div>中加入class .progress-striped实现条纹进度条. c.在内层<div>加入class .progress-b

动态加载js、css的实例代码

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

Django+Ajax+jQuery实现网页动态更新的实例

views.py中的修改 增加相应的请求处理函数: def getdevjson(request): print 'get here' if ('key' in request.GET): searchkey = request.GET.get('key') return JsonResponse(search(searchkey)) else: return HttpResponse('Sorry!') 返回字符串中,既可以使用from django.http import JsonRespo

使用Bootstrap框架制作查询页面的界面实例代码

以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势.很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架. Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程. 因此,本人

jquery实现的动态回到顶部特效代码

本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

基于jQuery实现仿51job城市选择功能实例代码

前些文章用写过,省市县三级联动,但是感觉选择的时候不够直观,现在改进了下,效果如下图 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="City.aspx.cs" Inherits="System_Select_City" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

使用jquery datatable和bootsrap创建表格实例代码

使用jquery-datatable插件 bootstrap前端框架 json 一.创建demo.html 代码块 代码块语法遵循标准markdown代码,例如: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" pref