jQuery+Ajax+PHP无刷新分页

wangzy2019 发布于2019-08-21 11:38 / 2209人阅读

摘要：下载演示地址本文使用，通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后，调用函数生成分页，也可用程序来实现分页。页面可在分页的属性中获取。

下载演示地址：http://www.erdangjiade.com/js...
本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。


    
    
#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 #ffffd;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 += "" + array["title"] + "";
            });
            $("#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 = "共" + total_num + "条" + page_cur + "/" + page_total_num + "";
    if (page_cur == 1) { //若是第一页
        page_str += "首页上一页";
    } else {
        page_str += "首页上一页";
    }
    if (page_cur >= page_total_num) { //若是最后页
        page_str += "下一页尾页";
    } else {
        page_str += "下一页尾页";
    }
    $("#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; 


  [1]: http://www.erdangjiade.com/js/2.html
  [2]: /img/bVKyOj

下载演示地址：http://www.erdangjiade.com/js...

云服务器 GPU云服务器无刷新ajax分页无刷新分页 Ajax无刷新 ajax无刷新页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86944.html

jQuery+Ajax+PHP无刷新分页

摘要：下载演示地址本文使用，通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后，调用函数生成分页，也可用程序来实现分页。页面可在分页的属性中获取。下载演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据，信...

Kosmos 2019-06-27 15:43 评论0 收藏0
jQuery+Ajax+PHP无刷新分页

摘要：下载演示地址本文使用，通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后，调用函数生成分页，也可用程序来实现分页。页面可在分页的属性中获取。下载演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据，信...

lauren_liuling 2019-08-14 17:46 评论0 收藏0
jQuery+Ajax+PHP无刷新分页

摘要：下载演示地址本文使用，通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后，调用函数生成分页，也可用程序来实现分页。页面可在分页的属性中获取。下载演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据，信...

mengbo 2019-08-01 16:30 评论0 收藏0
一步步实现thinkphp上的ajax无刷新分页

摘要：信息列表循环赋值分页信息部分这一步是实现无刷新分页的重点，用到了的通信，通过与数据库的交互，将获取到的数据写到模板中，替换掉之前的数据集，达到分页的目的。前言 thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面，这种翻页的用户体验显然是不太理想的，我们希望每次翻页只刷新我们想要的数据集部分的数据，这样我们很容易想到ajax异步通信，用ajax与数据库（本人在开发过程中使用...

张迁 2019-06-27 14:04 评论0 收藏0