jquery 分页控件功能
<script>
//分页
function getPageNum(num) {
$("#PageNum ul").empty();
var AllCount = num;
var total = Math.ceil(AllCount / 5); //数据可分的页数
var allhtml = "共<strong style='margin: auto 3px;'>" + total + "</strong>页";
$("#txtAll").html(allhtml);
// $("#txtAll").val(total);
for (var i = 1; i < total + 1; i++) {
var html = "<li><a>" + i + "</a></li>";
$("#PageNum ul").append(html);
}
var totalCount = Math.ceil(total / 7);
var current = 1;
$("#PageNum ul li:gt(6)").hide();
$("#btnPrev").attr("disabled", "disabled").click(function () { $("#btnNext").removeAttr("disabled");
current -= 1;
$("#PageNum ul li").hide();
var indexStart = (current - 1) * 7;
var indexEnd = indexStart + 7;
$(" #PageNum ul li").hide().slice(indexStart, indexEnd).show();
if (current == 1) $(this).attr("disabled", "disabled");
}); $("#btnNext").click(function () {
$("#btnPrev").removeAttr("disabled");
current += 1;
$("#PageNum ul li").hide();
var indexStart = (current - 1) * 7;
var indexEnd = current * 7 - 1 > $("#PageNum ul li").length - 1 ? $("#PageNum ul li").length - 1 : current * 7 - 1;
$(" #PageNum ul li").hide().slice(indexStart, indexEnd+1).show();
if (current == total) $(this).attr("disabled", "disabled");
}); $("#PageNum ul li").click(function () { //点击数字
$("#PageNum ul li").removeClass();
$(this).addClass("current");
var index = $(this).index();
getPageCurrent(index);
})
$("#btnConfirm").click(function () {//搜索页
$("#PageNum ul li").removeClass();
var index = $("#txtIndex").val();
if (index % 7 == 0) {
var indexStart = (Math.ceil(index / 7) - 1) * 7;
}
else {
indexStart = index - (index % 7);
}
var indexEnd = indexStart + 7;
$(" #PageNum ul li").hide().slice(indexStart, indexEnd).show();
$(" #PageNum ul li").eq(index - 1).addClass("current");
getPageCurrent(index - 1);
})
}
function getPageCurrent(index) {
var indexStart = index * 5;
var indexEnd = indexStart + 5;
$(" #thumbWrap_controlID ul li").hide().slice(indexStart, indexEnd).show();
}
</script> html代码:
<div class="products_contents" id="product">
<div class="thumbWrap">
<h2 style="font-size: 30px; color: #f8b551; text-align: center; line-height: 56px;">
</h2>
<div class="thumbWrap_control" id="thumbWrap_controlID">
<ul style=" height:24px;">
</ul>
</div>
<div id="PageNum">
<span class="totalPage" id="txtAll"></span>
<input type="button" id="btnPrev" value="上一页" />
<ul>
</ul>
<input type="button" id="btnNext" value="下一页" />
到<input type="text" id="txtIndex"/>页<input type="button" id="btnConfirm" value="确定" />
</div>
</div>
</div>
样式:
<style type="text/css">
#PageNum{ width:680px; margin-top:20px; font-size:16px; color:#84868e; float:left; margin-left:25px;}
#PageNum ul{list-style:none;text-align:center;}
#PageNum ul li{ font-size:12px; margin-left:6px; margin-right:6px; float:left; border:1px solid #ccc; padding-left:8px; padding-right:8px; line-height:24px; font-size:16px; cursor:pointer;}
.current{background:#fff; color:#020e2a;}
#btnPrev,#btnNext,#txtAll{ float:left; margin:0px; margin-left:5px; margin-right:5px;}
#btnPrev,#btnNext,#btnConfirm{ color:#555;line-height:24px; height:24px; padding-left:5px; padding-right:5px;}
#txtAll{ width:56px; height:24px; line-height:24px;color:#616D89;}
#txtIndex{ width:50px;height:24px; line-height:24px; margin:0px; background: #0c2643;}
.totalPage{ float:left; display:block; line-height:24px; margin-right:40px;}
</style>
jquery 分页控件功能的更多相关文章
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
- jquery 分页控件1
jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...
- jquery 分页控件(二)
上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...
- jquery 分页控件(一)
以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许还很多.个人觉得,适合自己用就 ...
- 自己写的简单的jQuery分页控件
因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过Jquery控件,硬着头皮找了些资料,写了这个分页控件,目 ...
- jQuery.page 分页控件
分享一下自己在项目中引用的Jquery分页控件 index.html内容 <!DOCTYPE html> <html lang="zh-cn" xmlns=&qu ...
- 日积月累系列之分页控件(js源码)
最近开发了一款分页控件,分享给大家. 主要功能和界面介绍 cform分页控件支持服务端分页.客户端分页.数据过滤.数据排序等功能. 源码介绍 cform-pager分页控件主要由三部分组成:css.s ...
- sharepoint 2010 列表数据分页控件介绍 pagination UserControl
转:http://blog.csdn.net/chenxinxian/article/details/8714391 这里主要是介绍下最近开发的一个sharepoint列表或者文档库的分页控件,并且把 ...
- 自定义WPF分页控件
一.分页控件功能说明 实现如上图所示的分页控件,需要实现一下几个功能: 可以设置每页能够展示的最大列数(例如每页8列.每页16列等等). 加载的数组总数量超过设置的每页列数后,需分页展示. 可以直接点 ...
随机推荐
- StateMachine
Create State Machine Create either a passive or an active state machine: ? 1 var fsm = new PassiveSt ...
- ruby中迭代器枚举器的理解
参考<ruby编程语言>5.3迭代器和可枚举对象 迭代器一个迭代器是一个方法,这个方法里面有yield语句,这个方法里的yield语句,与传递给这个方法的块进行数据传输 yield将数据传 ...
- [ActionScript 3.0] AS3.0 对象在一定范围随机显示不重叠
import flash.geom.Rectangle; import flash.display.MovieClip; import flash.display.Sprite; var arr:Ar ...
- oracle 游标笔记
declare v_x number; v_y number; v_geo clob; cursor cur is select c_x, c_y from t_map_data where c_ty ...
- angularjs 与django标签语法冲突的解决办法
在需要使用angularjs标签的地方套上verbatim标签,如: {% verbatim %} ... {% endverbatim %}
- (medium)LeetCode .Implement Trie (Prefix Tree)
Implement a trie with insert, search, and startsWith methods. Note:You may assume that all inputs ar ...
- c# .NET 进行数据库备份和还原
本文主要内容来源stswordman的介绍,开发环境为10,数据库为08R2 原文地址http://www.cnblogs.com/stswordman/archive/2006/08/06/4690 ...
- 利用Scanner键盘输入
Scanner不在java.lang.*包中,故必须import包java.util.Scanner.输入流(InputStream)为System.in 方法如下:Scanner s= new Sc ...
- Android开发-API指南-Content Provider基础
Content Provider Basics 英文原文:http://developer.android.com/guide/topics/providers/content-provider-ba ...
- python分析log
最近做的一个项目,系统log下会生成如下的log(部分): [-- ::] Processing File transfer configured from ship to shore.... [-- ...