资讯专栏INFORMATION COLUMN

jQuery+Ajax+PHP无刷新分页

wangzy2019 / 2128人阅读

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

下载演示地址: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...

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

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

    相关文章

    • jQuery+Ajax+PHP刷新分页

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

      Kosmos 评论0 收藏0
    • jQuery+Ajax+PHP刷新分页

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

      lauren_liuling 评论0 收藏0
    • jQuery+Ajax+PHP刷新分页

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

      mengbo 评论0 收藏0
    • 一步步实现thinkphp上的ajax刷新分页

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

      张迁 评论0 收藏0
    • jQuery+AJAX+PHP+MySQL数据库开发搜索功能,跳转刷新搜索。

      摘要:知识点提交表单,查询数据库,返回数组,遍历输出数组演示当表单无输入任何关键词的时候,返回请输入关键词当表单输入的关键词查询无果的时候,返回无结果当表单输入的关键词查询有结果,则返回结果。 知识点:ajax提交表单,php查询数据库,php返回json数组,javascript遍历输出json数组 演示: 1、当表单无输入任何关键词的时候,返回请输入关键词... showImg(http...

      刘德刚 评论0 收藏0

    发表评论

    0条评论

    wangzy2019

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <