当前位置:
首页 > 技术 > jQuery+Ajax+PHP无刷新分页

jQuery+Ajax+PHP无刷新分页

jQuery+Ajax+PHP无刷新分页

本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。

HTML

<div?class="lists">
     <ul?id="ul_lists"?class="clearfix"></ul> 
</div>
<div class="page" id="page"></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中获取。

$(document).on('click', '#page?a',function()?{?//on向未来的元素添加事件处理器,不可用bind
     var?page?=?$(this).attr("data-page");?//获取当前页
     getData(page)
});

PHP
ajax.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;

jQuery+Ajax+PHP无刷新分页:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!