PHP+jQuery+Ajax实现分页效果jpaginate插件应用

jpaginate是一个动态的滚动分页基于jQuery插件。其表现就像一个分页按钮。非常有趣的是,这些按钮可以滚动,我们可以控制按钮的前后滚动通过点击或鼠标滑动到小箭头两边的点。




调用jpaginate插件的方法很简单:




$(elementid)Paginate()。


属性设置

值得欣慰的是,jpaginate提供了大量的性能配置,你可以轻松地定制所需的分页效果。

设置方法,例如:




(elementid美元)。Paginate({
计数:80,
开始:1,
})…



计数:数字,总记录数。

开始:数字,开始显示的页数,例如:3是第三页的开始。

显示:数字,由分页栏,显示的页面数如:5显示5页的数量在同一时间。

是否边框:显示页码的边框。

border_color:设置边框的颜色,如# d3d3d3 。

text_color:设置页码的颜色,如# 68ba64 。

background_color:设置页码的背景色,如# f7f7f7 。

border_hover_color页码:设置边框的颜色当鼠标滑到页面数。

text_hover_color:设置页码的颜色,当鼠标滑到页面数。

background_hover_color:设置页码背景颜色,当鼠标滑到页面数。

图像:显示页码导航箭头(方向箭头)(true false)

当鼠标:设置to'press ',当鼠标滑到导航箭头,页码就会向前滚动。当设置to'slide ',点击导航键的页号一次。

OnChange:当页面被点击,回调函数。

示例应用程序:实现ajax分页效果

首先,准备的index.php,用于页面列出的博客文章。

1。引用JS:







$(函数(){())
$(#演示)。Paginate({
计数:,
开始:1,
显示器:5,
边界:真,
border_color:# bef8b8,
text_color:# 79b5e3,
background_color:# e3f2e1,
border_hover_color:# 68ba64,
text_hover_color:# 2573af,
background_hover_color:# cae6c6,
图片:虚假,
老鼠:'press,
OnChange:功能(页){
$(# pagetxt)。负荷(的文章。phpid =+页);
}
});
});



注意,属性的插件设置上面详细描述,和财产计数计算页页美元总数通过PHP,这是由article.php.also注意onChange属性获得:在调用函数时点击页面,并对article.php到article.php对异步提交页面参数实现的功能,通过读取数据库表和书籍的名单,结果返回页面,这是AJAX。当然,我只是做一个简单的演示,在这里,如果你需要更多的异步的结果,你可以使用jQuery的文档。

2。参考CSS:

的jpaginate官方提供了一个导航栏的风格,你也可以自己写一个很酷的风格。








3、初始页index.php。

有必要用以下代码显示文章的初始列表





演示3:ajax实现ajax分页效果








添加PHP代码为pagetxt ID的div:




查询=
而($行= $数据库-> fetch_array($查询)){
为出版日期=日期(当前
回声$出版日期
$行{标题}。



4、article.php代码。



本代码是用于获得提交的index.php页面数量,查询数据库,并输出结果,代码如下:




include_once(常见。PHP); / /数据库连接文件

ID =美元美元_get { 'id' }; / /页码
结果
美元美元总= DB -> db_num_rows($结果); / /总记录数

$ PageSize = 5; / /页码
$页=细胞($总 / / $ PageSize);/总页数
如果(isset($id)){
$起始=($ Id-1)* $ PageSize;
查询=
$ PageSize );
而($行= $数据库-> fetch_array($查询)){
为出版日期=日期(当前
回声$出版日期
$行。
}
}


以上介绍的jpaginate在Ajax分页效果PHP+jQuery实现插件的应用,希望对大家有所帮助的研究。