转，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. mac 功能修改。。。。

    个人表示 Mac 下的 Spotlight 搜索功能确实是个鸡肋,安装 QuickSilver 才是王道!所以我个人就把 Spotlight 关闭掉了.方法很简单,还是要用到 “终端” 工具. 在 “ ...

  2. MHA手动切换 原创1（主故障)

    MHA提供了3种方式用于实现故障转移,分别自动故障转移,需要启用MHA监控: 在无监控的情况下的手动故障转移以及基于在线手动切换. 三种方式可以应对MySQL主从故障的任意场景.本文主要描述在无监控的 ...

  3. 【ZZ】大数据架构师基础：hadoop家族，Cloudera系列产品介绍

    http://www.36dsj.com/archives/17192 大数据我们都知道hadoop,可是还会各种各样的技术进入我们的视野:Spark,Storm,impala,让我们都反映不过来.为 ...

  4. 关于NuDaqPci 数据采集

    最近在做公司一个fct的测试及调试软件 设计到的比较多的通信问题 1,Gpib通信(调用ADL-GPIB) 2,串口通信 3,Usb通信(调用USBXpress) 4,Pci通信(调用PCIS-DAS ...

  5. Qt focusoutevent 不响应的解决方法

    一般利用focus(焦点)来实现弹窗自动关闭效果. Qt的focus貌似是自己的bug, 经常无法接收到focusout的事件 例如: widgetA 中执行  widgetB->show(); ...

  6. mysql颠覆实战笔记(八)--mysql的自定义异常处理怎么破

    这一节课,沈老师带我们了解事务的异常 什么是异常? 我们先插入一组数据: ,10.5); 这个是正常的.但是我们把插入的user_money的值故意弄错:如下 ,‘abc’); 那么我们会得到一个ER ...

  7. android-partition分析

    转载请注明来源:cuixiaolei的技术博客 这里讲下android的分区.具体的使用在另一片文章中介绍,这里只是把它拿出来介绍. android的存储分为两种 一种叫做RAM,如emmc标准的dd ...

  8. python(6)- json和pickle模块

    这是用于序列化的两个模块: json: 用于字符串和python数据类型间进行转换 pickle: 用于python特有的类型和python的数据类型间进行转换 Json模块提供了四个功能:dumps ...

  9. 【暴力，STL，水】UVa 1523 - Helicopter

    Since ancient time, people have been dreaming of flying in the sky. Eventually, the dream was realiz ...

  10. hihocoder 1038 01背包

    #1038 : 01背包 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 且说上一周的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励 ...