快捷搜索:

jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

  动态网页asp编程软件有哪些页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页、下一页。

  我们需要将商品图片进行排列,以及设置分页条样式,当然这些样式的设计可以根据读取成功后的数据进行设置,本例中我们先把css代码贴出来。

  接下来,我们自定义一个函数:getData(),用来获取当前页数据ASP编程。函数中,我们利用$.ajax()向后台pages.php发送POST异步请求,将当前页码以JSON格式传递给后台。

  请求成功后并返回数据,将相应的数据附给变量,并将返回的商品数据列表循环展示到对应容器#list ul中。当数据完全加载完毕后,调用分页条函数getPageBar()生成分页条。

  最后,当页面第一次加载时,我们加载第一页数据即getData(1),当点击分页条中的分页链接时,调用getData(page)加载对应页码的数据。我们通过getPageBar()函数已预先在翻页连接的属性rel中在埋入了数字页码。

  pages.php接收每次前端页面的ajax请求,根据提交的页码pageNum值,从mysql数据库中获取数据,计算总记录数和总页数,读取对应页码下的数据列表,并将最终结果以JSON格式返回给前端页面。

  这时再回到前端页面,即看到数据已分号页,点击“下一页”看看是不是你要的效果,查看DEMO,分页条的样式大家可以自己定制,我给的是最基本的样式。

  以上就是关于jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解,Ajax分页效果让您的网站数据加载显得非常流畅,希望这篇文章对大家的学习有所帮助。

您可能还会对下面的文章感兴趣: