jquery自定义插件来实现分页的效果
本节将介绍如何定义自己的jquery插入，实现分页效果，话不多说，。看看达到的效果：
分页插件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>page test</title>
<style>
html,body,#pages,items{
font-size:11px;
font-family:"宋体","Times New Roman";
}
.page_item{
background:#C9DCD7;
width:155px;
text-align:left;
padding:10px;
border-bottom:1px solid #3CF;
}
.page_item:hover{
background:#A9C9FA;
cursor:pointer;
}
#page_ctrl{
padding-top:5px;
}
.page_ctrl{
width:40px;
text-align:center;
background:#A9C9FA;
float:left;
margin:2px;
padding-top:5px;
padding-bottom:5px;
}
.page_ctrl:hover{
background:#C9DCD7;
cursor:pointer;
}
</style>
<script type="text/javascript" src="../../zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
var showItemInfo;
(function($){
$.fn.itemPage = function(options){
var defaults = {};
var options = $.extend(defaults, options); var data=options.data,//数据
currpage=options.currpage,//当前页
pagesize=options.pagesize;//每页显示的数据条目器 var total=data.total; var items=$("<div id='items'></div>"),
pagectrl=$("<div id='page_ctrl'></div>"); var first=$("<div id=\"first\" class=\"page_ctrl\" onClick=\"showPage('first')\">首 页</div>"),
prev=$("<div id=\"prev\" class=\"page_ctrl\" onClick=\"showPage('prev')\">前一页</div>"),
next=$("<div id=\"next\" class=\"page_ctrl\" onClick=\"showPage('next')\">后一页</div>"),
last=$("<div id=\"last\" class=\"page_ctrl\" onClick=\"showPage('last')\">末 页</div>"); var start=getStartindex(),
end=getEndindex(); for(var i=start;i<end;i++){
var itemi=$("<div class='page_item' onClick='showItemInfo("+i+")'>"+data.items[i].text+"</div>");
items.append(itemi);
} pagectrl.append(first),
pagectrl.append(prev),
pagectrl.append(next)
pagectrl.append(last); var container = $(this);
container.append(items),
container.append(pagectrl); function getStartindex(){
return (currpage-1)*pagesize;
}
function getEndindex(){
var endIndex=0;
if(data.total%pagesize!=0 && currpage==getLastPage()){
endIndex = data.total;
}
else {
endIndex = currpage*pagesize;
}
return endIndex;
}
showItemInfo = function(i){
console.log(i);
};
}
})(jQuery);
</script> <script type="text/javascript">
var PAGE_DATA={
"total":10,
"items":[
{"id":1,"text":"数据1"},
{"id":2,"text":"数据2"},
{"id":3,"text":"数据3"},
{"id":4,"text":"数据4"},
{"id":5,"text":"数据5"},
{"id":6,"text":"数据6"},
{"id":7,"text":"数据7"},
{"id":8,"text":"数据8"},
{"id":9,"text":"数据9"},
{"id":10,"text":"数据10"}
]
};
var currpage=1;
var pagesize=4; $(document).ready(function (){
loadPages(currpage);
}); function showPage(page){
console.log(page);
switch(page){
case "prev":{//前一页
if(currpage>1){
currpage=currpage-1;
}
else{
alert("没有上一页了。");
}
break;
}
case "next":{//后一页
if(currpage!=getLastPage()){
currpage=currpage+1;
}
else{
alert("没有下一页了！ ");
}
break;
}
case "last":{//最后一页
currpage=getLastPage();
break;
}
default:{
currpage=1;//第一页
break;
}
}
loadPages(currpage);
}; function loadPages(page){
$('#pages').html("");
$('#pages').itemPage({
data:PAGE_DATA,
currpage:page,
pagesize:pagesize
});
}; function getLastPage(){
var total=PAGE_DATA.total;
if(total%pagesize==0){
return total/pagesize;
}
else{
return parseInt(total/pagesize)+1;
}
}
</script>
</head>
<body>
<div id="pages">
</div>
</body>
</html>
以下说说实现思路。实现分页效果。数据的载入能够分为两种情况：一次性获取数据和动态获取数据。
一次性获取数据就是将所要查询的数据一次性查询出来，在前台去做分页处理；动态获取数据是依据当前页面和每页显示的条目数去动态获取数据。对于第一种。可在数据量比較小的情况下使用。能够减去每次去请求数据库和写分页sql语句的麻烦；对于另外一种，适用于数据量比較大的时候。当数据量特别大的时候，一次性查询数据不论是前端还是后端，无疑都会减缓程序的运行效率与时间。
这里面，获取起始数和结束数是关键。起始数比較简单。为（currpage-1）*pagesize；终止数略微麻烦一点，由于有一个推断data.total%pagesize是否为零和当前页是不是最后一页。当data.total%pagesize！=0而且满足当前页为最后一页的条件时。终止数为data.total，否组终止数为currpage*pagesize。
第一页，currpage=1就可以；最后一页得推断total%pagesize是否为零，是值为total/pagesize，不是值为otal/pagesize取整+1；上一页，假设当前页大于零的情况下为当前页减1。否则，没有上一页。下一页，假设当前页小于最后一页的情况下，当前页加1。否则，没有最后一页。
版权声明：本文博主原创文章。博客，未经同意不得转载。
jquery自定义插件来实现分页的效果的更多相关文章
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- 你的专属定制——JQuery自定义插件
前 言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...
- jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
- fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用
使用fullpage的步骤 1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...
- jquery自定义插件——以 选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
- jQuery自定义插件
jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, ( ...
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- 代码：jquery自定义插件 demo
jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...
- jquery自定义插件实现分页效果
这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
随机推荐
- request.getContextPath获取绝对路径
request.getContextPath获取绝对路径 博客分类: 经验+注意 其他 request.getContextPath 项目需求:所有jsp页必须通过Action转发,不能直接在地址栏链 ...
- Debian 8.0(Jessie) 无线网卡，ATI显卡驱动和输入法等安装记录。
转载请注明作者与出处!谢谢! 最近准备彻底转换到Linux平台,之前一直用的是Red Hat,对Debian不是很熟悉,花了不少时间摸索.下面记录一下安装的过程以便备忘,顺便给他人能做个参考. 我的是 ...
- 固定DIV样式
<!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- 常见的mongodb可视化工具
一.MongoVue 1.MongoVUE是一款比较好用的MongoDB客户端工具,可以为大家提供一个高度.简洁可用的MongoDB管理界面. 2.通过MongoVUE,用户可以用树形.表格及bj ...
- 解决nginx: [error] open() ＂/usr/local/nginx/logs/nginx.pid＂ failed错误
重新启动服务器,访问web服务发现无法浏览,登陆服务器之 后进到nginx使用./nginx -s reload重新读取配置文件,发现报nginx: [error] open() "/usr ...
- 快速访问WCF服务--ServiceModel 元数据实用工具 (Svcutil.exe)
基本定义 ServiceModel 元数据实用工具用于依据元数据文档生成服务模型代码,以及依据服务模型代码生成元数据文档. SvcUtil.exe ServiceModel 元数据实用工具可在 Win ...
- 关于form.item不兼容的问题
form.item()能在IE下运行,在firefox中会报脚本错误,没有这个函数. 可以使用 Form.elements 方法得到 HTMLCollection 后再使用 item 方法获取表单内元 ...
- 关于如何在BCB中使用CodeGuard
作者:深圳虫 来自:深圳虫网本文来自http://www.szbug.com/disparticle.aspID=4 一. 为什么写这篇东西自己在使用BCB5写一些程序时需要检查很多东西,例如内存泄漏 ...
- Netty4.0学习笔记系列之二：Handler的执行顺序（转）
http://blog.csdn.net/u013252773/article/details/21195593 Handler在netty中,无疑占据着非常重要的地位.Handler与Servlet ...
- 设计模式之装饰者模式（Decorator Pattern）
一.什么是装饰者模式? 装饰者模式能够完美实现“对修改关闭,对扩展开放”的原则,也就是说我们可以在不修改被装饰者的前提下,扩展被装饰者的功能. 再来看看我们的文件操作代码: 1 InputStream ...