jQuery实现的简单分页示例
作者：郑文亮 发布时间：2024-04-09 19:45:29
标签：jQuery,分页
本文实例讲述了jQuery实现的简单分页。分享给大家供大家参考，具体如下：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS分页Class - 风干的果子</title>
<style type="text/css">
a {margin:3px; text-decoration:none;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//jquery页面加载开始
$(function()
{
var pageDiv1=new jsPage("list","all","p1","3");
pageMethod.call(pageDiv1);
var pageDiv2=new jsPage("list2","all","p2","5");
pageMethod.call(pageDiv2);})//$
//jquery 页面加载结束
//方法: pageMethod
function pageMethod()
{
var obj=this;
obj.resetTotal();
obj.reloadpage("1",obj.list_class);
obj.page(); //生成页码
ready2go.call(obj);
}
//方法:ready2go
function ready2go()
{
var obj=this;
$("#"+obj.page_obj_id+" a").live("click",function()
{ //点击页码的时候跳到相应页
obj.target_p=parseInt($(this).attr("p"));
gotopage.call(obj,obj.target_p);
})
}
// 方法: showClass
function showClass(list,x,pDiv,pSize){
var pObj=new jsPage(list,x,pDiv,pSize);
pageMethod.call(pObj);
}
// 方法: jsPage
function jsPage(list_id,list_class,page_obj_id,pagesize)
{
// list_id 结果集UL的id
// list_class 要显示的类别
// page_id 存放页码的id
// pagesize 每页显示多少条
this.list_obj_id=list_id;
this.list_Obj=$("#"+list_id);
this.li=$("#"+list_id+" li");
this.li.hide();
this.page_obj_id=page_obj_id;
this.page_obj=$("#"+page_obj_id); //存放页码的div
this.list_class=list_class; // 类别
if(list_class=="all")
{
this.results=this.li.length; // 总记录数等于所有记录
}
else
{
this.results=$("#"+list_id+" li."+list_class).length; // 总记录数等于指定类别的li数
}
this.totalpage; // 总页数
this.pagesize=pagesize; //每页记录数
this.cpage=1; //当前页,默认显示第一页
this.count;
this.target_p;
this.curcount;
this.outstr= ""; // 输出页码html
}//jsPage结束
//方法: gotopage
function gotopage(target){
this.cpage = target; //把页面计数定位到第几页
this.page();
this.reloadpage(target,this.list_class);
}
//给对象jsPage 增加函数 reloadpage
jsPage.prototype.reloadpage=function(p,resultType)
{
this.li.hide();
for(var i=this.pagesize*p-this.pagesize;i<this.pagesize*p;i++)
{
if(resultType=="all")
{
this.li.eq(i).show();
}else
{
$("#"+this.list_obj_id+" li."+resultType).eq(i).show();
}
}
}
//给对象jsPage 增加函数 resetTotal
jsPage.prototype.resetTotal=function()
{
if(this.results==0){
this.totalpage=0;
this.cpage=0;
}else if(this.results<=this.pagesize)
{
this.totalpage=1;
}
else if(parseInt(this.results/this.pagesize)==1)
{
this.totalpage=2;
}
else if(parseInt(this.results/this.pagesize)>1 && this.results％this.pagesize==0){
this.totalpage=this.results/this.pagesize;
}
else
{
this.totalpage=parseInt(this.results/this.pagesize)+1;
}
}//resetTotal()
//jsPage 对象增加函数 page
jsPage.prototype.page=function()
{
if(this.totalpage<=10)
{ //总页数小于十页 页码以十页为单位
for (this.count=1;this.count<=this.totalpage;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}else
{
this.outstr = this.outstr + "<span class='current' >"+this.count+"</span>";
}
}
}
if(this.totalpage>10)
{ //总页数大于十页
if(parseInt((this.cpage-1)/10) == 0)
{
for (this.count=1;this.count<=10;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}
else
{
this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
}
}
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >»</a>";
}
else if(parseInt((this.cpage-1)/10) == parseInt(this.totalpage/10))
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<\/a>";
for (this.count=parseInt(this.totalpage/10)*10+1;this.count<=this.totalpage;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}
else
{
this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
}
}
}
else
{
var lastP;
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<\/a>";
for (this.count=parseInt((this.cpage-1)/10)*10+1;this.count<=parseInt((this.cpage-1)/10)*10+10;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}
else
{
this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
}
if(this.count==this.totalpage)
{
lastP="";
}
else
{
lastP="<a href='javascript:void(0)' p='"+(this.count+1)+"' >»</a>";
}
}
this.outstr = this.outstr + lastP;
}
}
document.getElementById(this.page_obj_id).innerHTML = "<div><span id='info'>共"+this.totalpage+"页 第"+this.cpage+"页<\/span>" + this.outstr + "<\/div>";
this.outstr = "";
}
</script>
</head>
<body>
<a onclick="showClass('list','mm','p1','3')" href="#">美女</a> <a onclick="showClass('list','gg','p1','3')"
href="#">帅哥</a> <a onclick="showClass('list','all','p1','3')" href="#">全部</a><br />
<ul id="list">
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="mm">美女G</li>
<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="mm">美女G</li>
<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="mm">美女G</li>
<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="gg">帅哥G</li>
<li class="gg">帅哥H</li>
<li class="gg">帅哥G</li>
</ul>
<br />
<div id="p1">
</div>
<br />
<br />
<a onclick="showClass('list2','music','p2','5')" href="#">音乐</a> <a onclick="showClass('list2','movie','p2','5')"
href="#">电影</a> <a onclick="showClass('list2','all','p2','5')" href="#">全部</a><br />
<ul id="list2">
<li class="music">音乐A</li>
<li class="movie">电影A</li>
<li class="music">音乐B</li>
<li class="movie">电影B</li>
<li class="music">音乐C</li>
<li class="movie">电影C</li>
<li class="music">音乐D</li>
<li class="movie">电影D</li>
<li class="music">音乐E</li>
<li class="movie">电影E</li>
<li class="music">音乐F</li>
<li class="movie">电影F</li>
</ul>
<br />
<div id="p2">
</div>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
0
投稿猜你喜欢
- 我就废话不多说了，直接上代码吧！# -*- coding: utf-8 -*-import pandas as pdimport matpl
- 虽然有很多种方式可以解决这个问题，但是我们可以用T-SQL代码来处理这个文件删除过程。我用xp_cmdshell命令和FORFILES命令来
本文实例为大家分享了python地震数据可视化的具体代码，供大家参考，具体内容如下参考源码：seisplot准备工作：在windows10下- Python的标准库中的os模块包含普遍的操作系统功能。如果你希望你的程序能够与平台无关的话，这个模块是尤为重要的。即它允许一个程序在编写后
- 我就废话不多说了，直接上代码吧！#Python的matrix转置matrix = [[1,2,3,4],[5,6,7,8],[9,10,11
- 本文实例为大家分享了python实现二维数组的对角线遍历，供大家参考，具体内容如下第一种情况：从左上角出发，右下角结束要完成的事情，就像下图
- 对图片进行resize、裁剪、旋转、翻转图片处理时常用的手段有resize、裁剪、旋转、翻转，简单介绍一下python中怎么利用PIL库和t
- 1.概念百度百科：笛卡尔乘积是指在数学中，两个集合X和Y的笛卡尔积（Cartesian product），又称直积，表示为X &ti
- 今天在对一堆新数据进行数据清洗的时候，遇到了一个这样的问题：ValueError: cannot convert float NaN to
- //方法1：$ip = $_SERVER["REMOTE_ADDR"];echo $ip;//方法2：$user_IP
- 没注意到MooTools的Cookie类在写的时候自己做了一次encode，在读的时候做了一次decode，在一般的情况下，这个不会有什么问
- MySQL扩展库操作MySQL数据库的步骤如下：1：获取连接.2：选取书库。3：设置操作编码。4：发送SQL指令（MySQL数据库可以分为四
- 这篇文章主要介绍了如何在mac环境中用python处理protobuf,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学
- 前言Pythonnet这个 * 爆的项目的出现，使得我们可以用一种新的方式，让C#可以和Python之间进行互操作。但是它的设置和部署可能有点问
- 一提到数字图像处理，可能大多数人就会想到matlab，但matlab也有自身的缺点：1、不开源，价格贵2、软件容量大。一般3G以上，高版本甚
- 公司运营着的网站，流量很大，网站是交互式的，经常在过了三四个月的时候索引生成的碎片就很多，由于很大一部分页面没有生成静态，这就导致网站在打开
- int 数字python 有3种数字类型int： 整数类型float: 浮点类型complex: 复数类型int类型#Int或整数是完整的数
- 第一部分 关于requests库(1) requests是一个很实用的Python HTTP客户端库，编写爬虫和测试服务器响应数据时经常会用
- 要想在ASP.NET项目中使用SQLite数据库,先需下载一个ADO.NET 2.0 SQLite Data Provider,下载地址为:
- python判断字符串的前两个字母是否是”id"你可以使用 Python 的字符串切片来判断一个字符串的前两个
