zen-cart网站,模版,采集,二次开发

首页 » 网页前端 » JavaScript » 阅读文章

jQuery jPaginate插件–PHP+AJAX分页效果

2012-09-24 18:35 40168 1 发表评论
标签:


有点时间没有写新的文章了,跑外地逛了几天,然后回来做项目做了快1星期,总算是告一段落了。抽空把项目用到的比较有意思的抽出来整理下

作者地址:http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

调用

$(elementID).paginate();

属性

count: 总页数。

start: 开始显示的页数

display: 数字,分页条显示的页数

border: 是否显示页码的边框。(true/false)

border_color: 设置边框的颜色

text_color: 设置页码的颜色

background_color: 设置页码的背景色

border_hover_color: 设置鼠标滑向页码时页码边框的颜色。

text_hover_color: 设置鼠标滑向页码时页码的颜色。

background_hover_color: 设置鼠标滑向页码时页码背景的颜色。

images: 是否显示页码导航箭头(方向箭头)(true/false)

mouse: 设置为'press'时,当鼠标滑向导航箭头时,页码随之滚动;设置为'slide'时,鼠标单击一次导航箭头页码滚动一次。

onChange: 当单击页码时,回调函数.

演示

官方DEMO:官方DEMO

AJAX分页示例

1.引入jquery,jPaginate和css

<link rel="stylesheet" type="text/css" href="css/style.css" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.paginate.js"></script>

2. 必须先初始显示当前页面的内容

<div id="pagecontent">
		这是第一页
</div>
<div id="digg"></div>

3. 为该分页加载配置

$(function(){
    $("#digg").paginate({
        count         : 3,	//总页数,一般从数据库中取出所有条数然后除以要展示的条数,在用ceil取整
        start         : 1,
        display     : 5,
        border                    : true,
        border_color            : '#ddd',
        text_color              : '#aaa',
        background_color        : '#f0f0f0',
        border_hover_color        : '#35455E',
        text_hover_color          : '#35455E',
        background_hover_color    : '#f0f0f0',
        images                    : false,
        mouse                    : 'press',
        onChange                 : function(page){	//回调 ajax像page页面请求数据
                                    $("#pagecontent").load("page.php?page="+page);
                                 }
    });
	$("#pagecontent").ajaxSend(function(event, request, settings){	//数据加载前显示loading图片
        $(this).html('<div class="loading"><img src="images/loading.gif" /></div>');
    });
});

4. page页面,查询到改页面要展示的内容,然后反馈给index页

<?php
echo '这是ajax调用的第'.$_GET['page'].'页';
?>

ajax分页演示

ajax分页演示:Demo

下载

AJAX分页示例下载

相关日志:

评论 共1条 (RSS 2.0) 发表评论

  1. baiyj71 说道:

    $(“#digg”).paginate({
    count : five();
    ?>,//通过php调用获取$page
    php文件:

发表评论

  • 
  • 插入代码

联系我 Contact Me

回到页首