文档章节

jQuery+Ajax+PHP无刷新分页

开源中国_红薯
 开源中国_红薯
发布于 2018/11/21 16:01
字数 790
阅读 0
收藏 0
版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/61917584
下载演示地址:http://www.erdangjiade.com/js/2.html
效果图:



本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。
<div class="lists">
    <ul id="ul_lists" class="clearfix">
    </ul>
</div>#ul_lists以列表的形式展现数据,信息包括商品图片和标题
CSS.lists{width:740px;  margin:30px auto 0; position:relative}
#ul_lists li{float:left;width:220px;height:240px;margin:0 6px 6px;border:1px solid #ddd;padding:5px;overflow:hidden}
#ul_lists li img{width:220px; height:220px;margin:0 0 6px}
.page{ margin:12px 0 20px;  text-align:center}
.page span{margin:5px; font-size:14px}jQuery首先声明全局变量,后面分页用到。
var page_cur = 1; //当前页
var total_num, page_size, page_total_num;//总记录数,每页条数,总页数接着通过函数getData() 获取当前页数据。我们利用$.ajax GET方式把参数page以json格式传到ajax.php。
function getData(page) { //获取当前页数据
    $.ajax({
        type: 'GET',
        url: 'ajax.php',
        data: {
            'page': page - 1
        },
        dataType: 'json',
        success: function(json) {
            $("#ul_lists").empty();
            total_num = json.total_num; //总记录数
            page_size = json.page_size; //每页数量
            page_cur = page; //当前页
            page_total_num = json.page_total_num; //总页数
            var li = "";
            var list = json.list;
            $.each(list,
            function(index, array) { //遍历返回json
                li += "<li><a href='#'><img src='" + array['pic'] + "'>" + array['title'] + "</a></li>";
            });
            $("#ul_lists").append(li);
        },
        complete: function() {
            getPageBar(); //js生成分页,可用程序代替
        },
        error: function() {
            alert("数据异常,请检查是否json格式");
        }
    });
}每次请求返回的商品放置在#ul_lists中。当数据完全加载完毕后,调用函数getPageBar()生成分页,也可用程序来实现分页。
function getPageBar() { //js生成分页
    if (page_cur > page_total_num) page_cur = page_total_num; //当前页大于最大页数
    if (page_cur < 1) page_cur = 1; //当前页小于1
    page_str = "<span>共" + total_num + "条</span><span>" + page_cur + "/" + page_total_num + "</span>";
    if (page_cur == 1) { //若是第一页
        page_str += "<span>首页</span><span>上一页</span>";
    } else {
        page_str += "<span><a href='javascript:void(0)' data-page='1'>首页</a></span><span><a href='javascript:void(0)' data-page='" + (page_cur - 1) + "'>上一页</a></span>";
    }
    if (page_cur >= page_total_num) { //若是最后页
        page_str += "<span>下一页</span><span>尾页</span>";
    } else {
        page_str += "<span><a href='javascript:void(0)' data-page='" + (parseInt(page_cur) + 1) + "'>下一页</a></span><span><a href='javascript:void(0)' data-page='" + page_total_num + "'>尾页</a></span>";
    }
    $("#page").html(page_str);
}最后,当页面第一次加载时,我们加载第一页数据即getData(1),当点击分页条中的分页链接时,通过getData(page)加载对应页码的数据。页面page可在分页的属性data-page中获取。
$("#page a").live('click',function() { //live 向未来的元素添加事件处理器,不可用bind
    var page = $(this).attr("data-page"); //获取当前页
    getData(page)
});PHPajax.php接收每次前端页面的ajax请求,根据提交的页码page,计算总记录数和总页数,读取对应页码下的数据列表,并将结果以JSON格式返回给前端页面。
include_once('connect.php');

$page = intval($_GET['page']); //当前页
$total_num = mysql_num_rows(mysql_query("select id from goods")); //总记录数

$page_size = 6; //每页数量
$page_total = ceil($total_num / $page_size); //总页数
$page_start = $page * $page_size;

$arr = array("total_num" = >$total_num, "page_size" = >$page_size, "page_total_num" = >$page_total, );
$query = mysql_query("SELECT id,title,pic FROM goods ORDER BY ID ASC LIMIT $page_start,$page_size");
while ($row = mysql_fetch_array($query)) {
    $arr['list'][] = array('id' = >$row['id'], 'title' = >$row['title'], 'pic' = >$row['pic'], );
}

echo json_encode($arr);最后附上goods表结构,下载压缩包里也有哦~。
CREATE TABLE IF NOT EXISTS `goods` (  
  `id` int(8) NOT NULL AUTO_INCREMENT,  
  `title` varchar(80) NOT NULL,  
  `pic` varchar(255) NOT NULL,  
  PRIMARY KEY (`id`)  
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

本文转载自:https://blog.csdn.net/u013032788/article/details/61917584

开源中国_红薯
粉丝 1
博文 111
码字总数 0
作品 0
黄浦
私信 提问
jQuery+Ajax+PHP无刷新分页

下载演示地址:http://www.erdangjiade.com/js/2.html 效果图: 本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据,信息包括商品图...

2当家的
2017/03/13
290
1
Flutter EasyRefresh+ListView+Scoped Model 实现上拉刷新和分页加载

前言: Flutter项目需要实现“上拉刷新和分页加载“的功能,分页可以把大量数据分割成一个个小段,分次加载。这样可以有效避免因为一次load全部数据而导致客户端变慢的问题。在这里我使用Eas...

EmilyWu
07/18
0
0
Android分页加载刷新AsyncListUtil中DataCallback的refreshData()

Android分页加载刷新AsyncListUtil中DataCallback的refreshData() Android分页加载刷新AsyncListUtil中DataCallback的refreshData()函数,返回值控制分页总数据量。如果返回一个既定的整型数...

zhangphil
2018/05/29
0
0
ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中

ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件 地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面有很好的的案例,及注意事项 分页在我们的项目中是经常需...

HMD
07/19
0
0
jquery.pagination.js分页

jquery.pagination.js分页 序言 这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家。 友情提示下:我有...

charley158
2014/01/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hadoop集群搭建-05安装配置YARN

Hadoop集群搭建-04安装配置HDFS Hadoop集群搭建-03编译安装hadoop Hadoop集群搭建-02安装配置Zookeeper Hadoop集群搭建-01前期准备 先保证集群5台虚拟机, nn1 nn2 s1 s2 s3 hadoop 是 是 是 ...

虚拟世界的懒猫
35分钟前
4
0
聊聊spring cloud的ConsulServiceRegistry

序 本文主要研究一下spring cloud的ConsulServiceRegistry ServiceRegistry spring-cloud-commons-2.1.2.RELEASE-sources.jar!/org/springframework/cloud/client/serviceregistry/ServiceR......

go4it
昨天
3
0
Nextjs 学习 —— hooks

22

lemos
昨天
1
0
如何在spring mvc restful接口中定制化类型转换和格式化

1.痛点 最近小胖哥搞了个小程序,有几个spring mvc 接口传递了时间,时间用java 8 time 相关的api 来直接接收: 当使用根据ISO 8601格式化的参数向任何这些方法发送POST请求时,报出了如下异...

码农小胖哥
昨天
13
0
docker日志监控

日志处理机制 我们先来了解一下docker日志处理的机制,当启动一个容器的时候,它其实是docker daemon的一个子进程,docker daemon可以拿到你容器里面进程的标准输出,拿到标准输出后,它会通...

爱宝贝丶
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部