PHP+jPaginate插件制作无刷新分页实例

jPaginate是一款动感滚动分页插件,它的表现形式是像分页的按钮一样,有意思的是这些按钮却可以左右滚动,可以通过单击或
鼠标滑向点两侧的小箭头来控制按钮的左右滚动。
读取第一页数据:
<div id="pagetxt">
<?php
$query = mysql_query("select id,title,addtime from article order by id desc limit 0, 6");
while ($row = mysql_fetch_array($query)) {
$pubdate = date("Y-m-d", $row['addtime']);
echo '<p><span>' . $pubdate . '</span><a href="http://www.sucaihuo.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>';
}
mysql_close();
?>
</div>
分页参数:
$("#demo3").paginate({
count: <?php echo $page; ?>, //总记录数
start: 1, //开始显示的页数
display: 5, //分页条显示的页数
border: true, //是否显示页码的边框
border_color: '#BEF8B8', //设置边框的颜色
text_color: '#79B5E3', //设置页码的颜色
background_color: '#E3F2E1', //设置页码的背景色
border_hover_color: '#68BA64', //设置鼠标滑向页码时页码边框的颜色
text_hover_color: '#2573AF', //设置鼠标滑向页码时页码的颜色
background_hover_color: '#CAE6C6', //设置鼠标滑向页码时页码背景的颜色
images: false, //是否显示页码导航箭头
mouse: 'press', //设置为'press'时,当鼠标滑向导航箭头时,页码随之滚动;设置为'slide'时,鼠标单击一次导航箭头页码滚动一次。
onChange: function(page) { //当单击页码时,回调函数.
$("#pagetxt").load("article.php?p=" + page);
}
});
article.php代码:
$p = isset($_GET['p']) ? intval($_GET['p']) : "";
$result = mysql_query("select id from article");
$total = mysql_num_rows($result);
$pagesize = 6; //每页显示数
$page = ceil($total / $pagesize); //总页数
if ($p) {
$startPage = ($p - 1) * $pagesize;
$query = mysql_query("select id,title,addtime from article order by id desc limit $startPage, $pagesize");
while ($row = mysql_fetch_array($query)) {
$pubdate = date("Y-m-d", $row['addtime']);
echo '<p><span>' . $pubdate . '</span><a href="http://www.sucaihuo.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>';
}
}
本文转自:https://www.sucaihuo.com/php/95.html 转载请注明出处!
PHP+jPaginate插件制作无刷新分页实例的更多相关文章
- Thinkphp+Ajax带关键词搜索列表无刷新分页实例
Thinkphp+Ajax带关键词搜索列表无刷新分页实例,两个查询条件,分页和搜索关键字,懂的朋友还可以添加其他分页参数. 搜索#keyword和加载内容区域#ajax_lists <input ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- jquery ajax php+mysql 无刷新分页 详细实例
最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...
- javascript;Jquery;获取JSON对象,无刷新分页,异步加载,异步删除,实例。
AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- 扩展GridView实现的一个自定义无刷新分页,排序,支持多种数据源的控件TwfGridView
最近项目View层越来越趋向于无刷新化,特别是数据展示方面,还要对Linq有很好的支持.在WebFrom模式的开发中,GridView是一个功能很强大,很常用的控件,但是他也不是完美的,没有自带的无刷 ...
- 无刷新分页 jquery.pagination.js
无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...
- MVC简单分页(未实现无刷新分页)
分页Html辅助方法 using System.Text; using System.Web: using System.Web.Mvc; namespace System.Web.Mvc { pub ...
- 学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
随机推荐
- PIE-SDK For C++矢量数据的投影转换
1.功能简介 目前在地理信息领域中数据包括矢量和栅格两种数据组织形式,每一种数据都可以对投影进行转换,目前PIE SDK支持矢量和栅格数据的投影转换功能,下面对矢量数据的投影转换功能进行介绍. 2.功 ...
- Wannafly Winter Camp 2020 Day 6C 酒馆战棋 - 贪心
你方有 \(n\) 个人,攻击力和血量都是 \(1\).对方有 \(a\) 个普通人, \(b\) 个只有盾的,\(c\) 个只有嘲讽的,\(d\) 个有盾又有嘲讽的,他们的攻击力和血量都是无穷大.有 ...
- HTTP协议、时间戳、防盗链的一些概念
HTTP协议 什么是HTTP协议 (HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一 ...
- STL-set&&multiset 集合
#include <iostream> #include <cstdio> #include <set> // 仿函数的原型 //struct greaters / ...
- C++中用vector定义矩阵
熟悉c风格的矩阵定义,那么用纯c++特性vector如何定义一个矩阵呢? # include<vector> # include <iostream> int main() { ...
- babel环境安装与编译
babel:将浏览器不支持的ES6语法转为javascript 查看node是否安装: npm -v node -v 实例演示:在桌面新建part5目录在cmd命令行中 cd desktop cd p ...
- centos系统mongodb安装
使用腾讯云搭服务器时,需要链接数据库,就从头开始重新安装了一遍mongodb,没想到这么麻烦,记得之前没这么麻烦. 1.下载mongodb(一篇博客的) 安装的是3.6版本 `` vim /etc/y ...
- JAVA中定义不同进制整数
1.八进制整数以0开头 int b = 033;//表示十进制数27,3 × 81 + 3 × 80 = 3 × 8 + 3 × 1 = 24 + 3 = 27 2.十六进制整数以0x或者0X开头 i ...
- python的for循环的神奇之处
python的for循环太神奇了: 你可以编写这样的语句: for i in range(10) : j= i**2 print(j) 你也可以编写这样的语句: with open('/path/to ...
- layui radio手动选择失效的问题
var radio_types = document.getElementsByName("radio_type"); for (var i = 0; i < radio_t ...