封装的分页jq
(function ($) {
$.fn.page = function (options) {
var defaults = {
divid: "pagediv",
count: , //remove or hide
pageindex: ,
callback: function (pageindex) { }
};
var html = "";
var opts = $.extend(defaults, options);
opts.callback();
var div = $("#" + opts.divid);
var a = [];
//根据当前页数判断上一页是否可以点击
if (opts.pageindex == ) {
html = html + "<a href=\"#\" class=\"prev unclick\">上一页</a>";
} else {
html = html + "<a href=\"#\" class=\"prev\">上一页</a>";
}
for (var i = ; i < opts.count; i++) {
//判断显示页码的样式
if ((i + ) == opts.pageindex) {
html = html + "<a href=\"javascript:void(0)\" style=\"background:#999\">" + (i + ) + "</a>"
} else {
html = html + "<a href=\"javascript:void(0)\">" + (i + ) + "</a>";
}
}
//根据当前页数判断上一页是否可以点击
if (opts.pageindex == opts.count) {
html = html + "<a href=\"javascript:void(0)\" class=\"next unclick\">下一页</a>";
} else {
html = html + "<a href=\"javascript:void(0)\" class=\"next\">下一页</a>";
}
$("#" + opts.divid).html(html);
$("#" + opts.divid + " a").not($(".prev")).not(".next").click(function () {
$(this).css("background", "#999")
$(this).siblings().removeAttr("style");
opts.pageindex = $(this).html();
if (opts.pageindex != ) {
$(".prev").removeClass("unclick");
} else {
$(".prev").addClass("unclick");
}
if (opts.pageindex == opts.count) {
$(".next").addClass("unclick");
} else {
$(".next").removeClass("unclick");
}
opts.callback(opts.pageindex);
})
$(".prev").click(function () {
$("#" + opts.divid + " a").eq(opts.pageindex).removeAttr("style");
if (opts.pageindex == ) {
opts.pageindex ==
} else {
opts.pageindex = opts.pageindex - ;
}
$("#" + opts.divid + " a").eq(opts.pageindex).css("background", "#999");
if (opts.pageindex != ) {
$(".prev").removeClass("unclick");
} else {
$(".prev").addClass("unclick");
}
if (opts.pageindex == opts.count) {
$(".next").addClass("unclick");
} else {
$(".next").removeClass("unclick");
}
opts.callback(opts.pageindex);
});
$(".next").click(function () {
$("#" + opts.divid + " a").eq(opts.pageindex).removeAttr("style");
if (opts.pageindex == ) {
opts.pageindex ==
} else {
opts.pageindex = parseInt(opts.pageindex) + ;
}
$("#" + opts.divid + " a").eq(opts.pageindex).css("background", "#999");
if (opts.pageindex != ) {
$(".prev").removeClass("unclick");
} else {
$(".prev").addClass("unclick");
}
if (opts.pageindex == opts.count) {
$(".next").addClass("unclick");
} else {
$(".next").removeClass("unclick");
}
opts.callback(opts.pageindex);
});
}
})(jQuery);
封装的分页jq的更多相关文章
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
- 使用JS分页 <span> beta 3.0 完成封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
- 基于jQuery封装的分页组件(可自定义设置)
jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...
- uinty3d使用ugui封装一个分页控件
我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...
- mysql数据库封装和 分页查询
1 之前我们学到了php连接mysql数据库的增删改查,中间要多次调用数据库, 而且以后用到的表比较多,上传中如果需要改数据的话会非常麻烦,但是如果 我们把数据库封装,到时就可以很轻松的把改掉一些数据 ...
- MySQL数据库封装和分页查询
1.数据库封装 <?php //我用的数据库名是housedb class DBDA {public $host="localhost";public $uid=" ...
- 封装page分页类
类: <?php //分页工具类 class Page{ /* * 获取分页字符串 * @param1 string $uri,分页要请求的脚本url ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- 大话分页(补充)——Threadlocal封装offSet和pageSize简化分页工具类
经过前两篇文章(大话分页一.大话分页二)的介绍,我认为我想介绍的东西已经介绍完了,不过想精益求精的童鞋可以继续看本篇文章. 在第一篇文章中介绍了一个分页的工具类(具体请看大话分页一),从实现功能上来说 ...
随机推荐
- a标签中的label在IE下触发不了a标签的href链接(label标签——解析)
<a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...
- [Andrew]Ext.net前台弹框
//有询问的提示框 Ext.Msg.show({ title: title, msg: msg, buttons: Ext.Msg.Y ...
- SMG12232ZK标准字符点阵型液晶显示模块的演示程序[C51编程语言][MCS51并行接口方式]
//SMG12232ZK标准字符点阵型液晶显示模块的演示程序[C51编程语言][MCS51并行接口方式] //应用产品: SMG12232ZK标准中文字符点阵型液晶显示模块 // 本演示程序适用于SM ...
- 【暑假】[深入动态规划]UVa 1627 Team them up!
UVa 1627 Team them up! 题目: Team them up! Time Limit: 3000MS Memory Limit: Unknown 64bit IO Forma ...
- Error starting static Resources java.lang.IllegalArgumentException: Document base D:\Program Files\apache-tomcat-xxx\webapps\xxx does not exist or is not a readable directory
网上的答案大多数如下: 但并没有解决我的问题 经过我的观察: 在tomcat的server.xml有Lottery项目描述,但实际上,该项目已被我删除,不存在于webapps中了 该行Cont ...
- Ubuntu 固态硬盘 4K对齐及启用 Trim,及其验证方法
因为之前一个移动硬盘因为坏道蔓延导致没办法继续使用,我略冲动地跑去买了一块 120GB 的三星840 固态硬盘回来.为了使用起来更方便,还去弄了个光驱位硬盘托架,把固态硬盘接在了光驱位与原本的笔记本硬 ...
- linux磁盘简单分区方式
1:分区 fdisk /dev/sdb 2:格式化 mkfs -t ext3 /dev/sdb1 或者 mke2fs -t ext4 /dev/sdb2 3:挂载 mount /dev/sdb1 ...
- Objective-C Autorelease Pool 的实现原理
内存管理一直是学习 Objective-C 的重点和难点之一,尽管现在已经是 ARC 时代了,但是了解 Objective-C 的内存管理机制仍然是十分必要的.其中,弄清楚 autorelease 的 ...
- SQL Server 重新恢复自动编号列的序号
1. truncate table tablename2. DBCC CHECKIDENT (tablename,reseed,1) truncate命令不但会清除所有的数据,还会将IDENTIT ...
- Dev XtraTreeList 学习
本文转载:http://www.cnblogs.com/VincentLuo/archive/2012/01/06/2313983.html 一.设置载请保留地址http://www.cnblogs. ...