<!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>simplePage</title>
<style type="text/css">
html,body{ margin:0 auto; text-align:center; }
.main{ font:12px/24px "Microsoft YaHei"; height:1000px; }
#page{ margin:100px auto; width:960px; text-align:center; }
#page a{ text-decoration:none; display:inline-block; height:24px; padding:0 8px; border-radius:3px; background-color:#DEF39E; color:#8CAC2C; text-align:center; margin:0 2px; }
#page a:hover,#page .now{ background-color:#8CAC2C; color:#fff; transition:all .5s ease 0s; }
</style>
</head>
<body>
<div class="main">
<div id="page">
<!--
<a href="#3">上一页</a>
<a href="#4">4</a>
<a href="#5">5</a>
<a href="#6" class="now">6</a>
<a href="#7">7</a>
<a href="#8">8</a>
<a href="#9">下一页</a>
-->
</div>
<div class="back"></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.simplePage({
obj : "#page",
current : "now",
nowNum : 1,
allNum : 20,
pageSize : 5,
callBack : function(now, all){
$(".back").html(now + "-" + all);
}
});
});
/*!
* jQuery simple page plus v1.1
* http://www.imsole.net/
* Author:sole
* Created:2012/10/31 upd 2013/10/15
*/
$.extend({
simplePage : function(opt){
if(!opt.obj){ return false; };
var obj = $(opt.obj);
var cls = opt.current;
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;
var pageSize = opt.pageSize || 5;
var callBack = opt.callBack || function(){};
var apd_ele = "";
var pagecenter = pageSize%2 == 0 ? pageSize/2 : (pageSize+1)/2;
function ele(num, cls){
var str = "";
if(cls){
str = "<a href='#"+num+"' class='"+cls+"'>"+num+"</a>";
}else{
str = "<a href='#"+num+"'>"+num+"</a>";
}
return str;
}
if(nowNum > 1){
apd_ele = "<a href='#"+ ( nowNum - 1 ) +"'>上一页</a>";
obj.append(apd_ele);
}
if(allNum <= pageSize){
for(var i=1; i<=allNum; i++){
if(nowNum == i){
apd_ele = ele(i, cls);
}else{
apd_ele = ele(i);
}
obj.append(apd_ele);
}
}else{
for(var i=1; i<=pageSize; i++){
if(nowNum == 1 || nowNum == 2){
if(nowNum == i){
apd_ele = ele(i, cls);
}else{
apd_ele = ele(i);
}
}else if( (allNum - nowNum) == 0 || (allNum - nowNum) == 1 ){
if( (allNum - nowNum) == 0 && i == pageSize){
apd_ele = ele( (allNum - pageSize + i), cls);
}else if( (allNum - nowNum) == 1 && i == pageSize-1){
apd_ele = ele( (allNum - pageSize + i), cls);
}else{
apd_ele = ele( allNum - pageSize + i );
}
}else{
if(i == pagecenter){
apd_ele = ele(nowNum-pagecenter+i, cls);
}else{
apd_ele = ele(nowNum-pagecenter+i);
}
}
obj.append(apd_ele);
}
}
if((allNum - nowNum) >= 1){
apd_ele = "<a href='#"+ ( nowNum + 1 ) +"'>下一页</a>";
obj.append(apd_ele);
}
callBack(nowNum, allNum);
$("a", obj).click(function(){
var url = $(this).attr("href");
var nowNum = url.match(/#\d+/g)+'';
nowNum = parseInt(nowNum.substring(1));
obj.html("");
$.simplePage({
obj : obj,
current : cls,
nowNum : nowNum,
allNum : allNum,
pageSize : pageSize,
callBack :callBack
});
return false;
});
}
});
</script>
</body>
</html>
分享到:
相关推荐
jquery ajax分页插件 jquery ajax分页插件 jquery ajax分页插件
jquery ajax分页插件jquery.pagination的.net示例;支持多种格式ajax更换,使用SqlHelper连NorthWind数据库,也可以自定义数据源来显示
jquery的Ajax分页插件,含html演示示例(javascript数组做数据源)
NULL 博文链接:https://jxdwuao.iteye.com/blog/714691
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
ajax技术,现在十分流行,如果分页也用ajax写的话,将大大提高用户体验
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改...
既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述、介绍也 比不上代码来得实在。) 1、首先定义一个pager对象: var sjPager = window.sjPager = {...
基于jquery扩展的前端分页插件,只需要将注重点放在后面json数据上,前端只需要遍历表格数据就可完成整个前端的分页操作。 PS:如遇BUG请自行修改 使用请引入css和js $("div").easyPage(url,param,function(data){ $...
jQuery paginate分页导航插件ajax分页代码 jQuery paginate分页导航插件ajax分页代码 jQuery paginate分页导航插件ajax分页代码
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1、首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: 10, preText: "pre", nextText: "next", first...
非常漂亮方法的javascript ajax jquery分页插件!无刷分页不用愁!
jQuery Pagination Ajax 分页插件,本插件实现的分页效果适合移动版和PC版,Ajax在不实现刷新网页的情况下,控制内容分页显示,实现这一功能,需要前台和后台两者结合 ,前台也就是本款代码所展现的功能,实现Ajax的...
纯前台控制的分页 使用的是jquery的插件 自定义页码显示数量和显示数据量 简单好用 不=关联后台 直接在前台jqeury操作分页内容 方便快捷
jQueryPager(JQuery分页插件pagination实现Ajax分页)
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示
功能强大的ajax方式jQuery前端分页插件pagination.zip