jquery实现的伪分页效果代码
本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考，具体如下：
这里介绍的jquery伪分页效果，在火狐下表现完美，IE全系列下有些问题，引入了jQuery1.7.2插件，代码里有丰富的注释，相信对学习jQuery有不小的帮助，期待大家关注。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/
具体代码如下：
<!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>jquery伪分页效果</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li:gt(3)").hide();//初始化，前面4条数据显示，其他的数据隐藏。
var total_q=$("ul li").index()+1;//总数据
var current_page=4;//每页显示的数据
var current_num=1;//当前页数
var total_page= Math.round(total_q/current_page);//总页数
var next=$(".next");//下一页
var prev=$(".prev");//上一页
$(".total").text(total_page);//显示总页数
$(".current_page").text(current_num);//当前的页数
//下一页
$(".next").click(function(){
if(current_num==7){
return false;//如果大于总页数就禁用下一页
}
else{
$(".current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
$.each($('ul li'),function(index,item){
var start = current_page* (current_num-1);//起始范围
var end = current_page * current_num;//结束范围
if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
$(this).show();
}else {
$(this).hide();
}
});
}
});
//上一页方法
$(".prev").click(function(){
if(current_num==1){
return false;
}else{
$(".current_page").text(--current_num);
$.each($('ul li'),function(index,item){
var start = current_page* (current_num-1);//起始范围
var end = current_page * current_num;//结束范围
if(index >= start && index < end){//如果索引值是start和end之间的元素就显示，否则就隐藏
$(this).show();
}else {
$(this).hide();
}
});
}
})
})
</script>
<style type="text/css">
.main{width:800px;zoom:1;margin:0 auto;}
.item{width:800px;overflow:hidden;}
ul{padding:0;width:860px;zoom:1;}
.clear{zoom:1;}
.clear:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
ul li{list-style-type:none;float:left;background:#F69;font-size:60px;text-shadow:1px 1px 3px #555;width:380px;height:200px;margin:10px 40px 10px 0;line-height:200px;text-align:center;color:#fff;}
.page_btn{padding-top:20px;}
.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
.page_box{float:right;}
.num{padding:0 10px;}
</style>
</head>
<body>
<div class="main">
<div class="item">
<ul class="clear">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
</ul>
</div>
<div class="page_btn clear">
<span class="page_box">
<a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
</span>
</div>
</div><!--main-->
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery无刷新分页完整实例代码
本文实例讲述了jQuery无刷新分页实现方法.分享给大家供大家参考,具体如下: 这款jQuery分页示例,是分页经典形式,兼容性也做的好,网页上的分页代码,分享给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-wsx-page-style-demo/ 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" conte
-
jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: 10, preText: "pre", nextText: "next", firstText: "First", lastText: "Last", shiftingLeft: 3, shiftingRig
-
jQuery实现的仿百度分页足迹效果代码
本文实例讲述了jQuery实现的仿百度分页足迹效果代码.分享给大家供大家参考,具体如下: 这是一个类似于百度的分页足迹效果,基于jquery,原理就是所有为奇数的足迹元素给不一样的样式而已,其它的非奇数元素就按默认的样式. 参数说明: obj为所有奇数元素 even当前所要点击触发事件 bg为足迹元素 active_bg为点击后的足迹背景 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-baidu-page-style-code
-
基于jQuery实现的无刷新表格分页实例
本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica
-
自己动手写的jquery分页控件(非常简单实用)
最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议. css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑"; fo
-
使用JQuery实现的分页插件分享
一个简单的jQuery分页插件,兼容AMD规范和requireJS. /** * jQuery分页插件 * */ ;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } else { // 全局模式 factory(jQuery); } }(function ($) { //定义
-
jQuery ajax分页插件实例代码
推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶 既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也 比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo
-
基于jquery实现表格无刷新分页
本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre
-
jQuery+Ajax实现无刷新分页
1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version 1.2 * @param {int} maxentries Number o
-
jQuery实现伪分页的方法分享
本文实例讲述了jQuery实现伪分页的方法.分享给大家供大家参考,具体如下: 可以对表格数据进行伪分页,而且只需要执行简单的代码就可以实现. 实现的很简单.样式也不太好看,大家可以自行调整,纠正. 下面是一个table,tbody里加载tr数据,无论你怎么加载, 在数据加载完成后便可以对table数据进行伪分页.注意div引用的class,我填充的数据是四列的,所以td里加了colspan,div是分页显示区域 <table> <tbody id="dialog-items&q
-
jQuery simplePage+AJAX plus分页插件用法实例
本文实例讲述了jQuery simplePage+AJAX plus分页插件.分享给大家供大家参考,具体如下: <!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&q