转，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>分页</title>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(document).ready( function() {

var total = Math.ceil($("ul li").length / 3);

var current = 1;

$("ul li:gt(2)").hide();

$("#btnPrev").attr("disabled", "disabled").click( function() {

$("#btnNext").removeAttr("disabled");

current -= 1;

$("ul li").show();

var indexStart = (current - 1) * 3;

var indexEnd = indexStart + 2;

$("li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("ul")).hide();

if (current == 1) $(this).attr("disabled", "disabled");

});

$("#btnNext").click( function() {

$("#btnPrev").removeAttr("disabled");

current += 1;

$("ul li").show();

var indexStart = (current - 1) * 3;

var indexEnd = current * 3 - 1 > $("ul li").length - 1 ? $("ul li").length - 1 : current * 3 - 1;

$("li:lt(" + indexStart + "), li:gt(" + indexEnd +")", $("ul")).hide();

if (current == total) $(this).attr("disabled", "disabled");

});

});

</script>

</head>

<body>

<ul>

<li>01</li>

<li>02</li>

<li>03</li>

<li>04</li>

<li>05</li>

<li>06</li>

<li>07</li>

</ul>

<input type="button" id="btnNext" value="上一页" /><input type="button" id="btnPrev" value="下一页" />

</body>

</html>

Jquery实现简单的分页的更多相关文章

  1. pagination jquery最简单的分页【无刷新和刷新都通用】

    参数说明 参数名 描述 参数值 maxentries 总条目数                           必选参数,整数 items_per_page 每页显示的条目数            ...

  2. 【Demo】jQuery 设置简单的分页

    功能描述: (1)设定起始页位置和每页的大小: (2)绑定自定义的分页事件,在事件中隐藏当前页不需要显示的行: (3)为表格添加页链接: (4)绑定链接的单击事件,在事件中触发表格分页事件. 效果图: ...

  3. jquery ajax json简单的分页，模拟数据，没有封装，只显示原理

    简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...

  4. jquery自定义插件实现分页效果

    这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...

  5. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. 简单的分页存储过程，Json格式日期转换为一般日期

    简单的分页存储过程 CREATE PROC Paged @pageIndex INT, @pageCount INT OUTPUT, @pageSize INT AS DECLARE @count I ...

  8. Javascript对象、Jquery扩展简单应用

    Javascript对象,表现方式一: person = new Object(); person.firstname = "An"; person.lastname = &quo ...

  9. 只是一个用EF写的一个简单的分页方法而已

    只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...

随机推荐

  1. kafka彻底删除topic

    如果只是用kafka-topics.sh的delete命令删除topic,会有两种情况: 如果当前topic没有使用过即没有传输过信息:可以彻底删除 如果当前topic有使用过即有过传输过信息:并没有 ...

  2. c语言全局变量

    1.全局变量 #include <stdio.h> int L,n; void solve() { // printf("%d",L); printf("%d ...

  3. poj3080解题报告（暴力、最大公共子串）

    POJ 3080,题目链接http://poj.org/problem?id=3080 题意: 就是求m个长度为60的字符串的最长连续公共子串,2<=m<=10 规定: 1.最长公共串长度 ...

  4. Java基础知识强化101：Java 中的 String对象真的不可变吗 ?

    1. 什么是不可变对象?       众所周知, 在Java中, String类是不可变的.那么到底什么是不可变的对象呢? 可以这样认为:如果一个对象,在它创建完成之后,不能再改变它的状态,那么这个对 ...

  5. C# WinForm 中ComboBox数据绑定的问题 （转）

    来自:http://blog.sina.com.cn/s/blog_5fb9e26301013wga.html C# WinForm 中ComboBox数据绑定的问题 怎样让WinForm中的Comb ...

  6. javaweb学习总结八(xml约束DTD)

    一:XML约束概念 xml约束:可以编写一个文档来约束xml文件的书写规范. xml语言格式比较严谨,不可能让程序员随意编写,所以必须要有约束. 二:常用的xml约束技术 1:DTD,document ...

  7. [改善Java代码]不同的场景使用不同的泛型通配符

    Java泛型支持通配符(Wildcard),可以单独使用一个"?"表示任意类,也可以使用extends关键字标识某一类(接口)的子类型,还可以使用super关键字标识某一类(接口) ...

  8. [改善Java代码] 枚举项数量限定为64个以内

    建议89:枚举项的数量限制在64个以内 为了更好的使用枚举,java 提供了两个枚举集合:EnumSet和EnumMap,这两个集合的使用都比较简单,EnumSet表示其元素必须是某一枚举的枚举项,E ...

  9. 一些xcode5.1创建的工程在xcode6.0下不能编译的问题

    这是因为Xcode5.1.1自动选上了arm64架构, 建议解决办法是: Build Settings-ValidArchitectures中却掉arm64

  10. CSE(Corrupted State Exceptions) 严重异常处理办法

    原因分析 出现这个问题说明.NET版本至少是4.0,因为微软在.NET 4.0版本中更改了异常处理机制.微软认为catch(Exception)这种写法是不负责任的,程序员应该按照异常严重类别决定程序 ...