jq实现点击加载更多分页功能

本文介绍如何利用jQuery实现点击加载更多的分页功能。通过Ajax获取JSON格式的下一页内容,若涉及跨域则采用jsonp。内容加载后使用append()方法追加到页面元素,同时更新加载按钮的页数和总页数属性。当达到最后一页时,移除加载更多按钮。示例代码包括jQuery和PHP实现。
摘要由CSDN通过智能技术生成

页面上实现类似于下拉加载更多的功能,这种是点击加载更多 。


大致思路是:

  • 首先Ajax获取到下一页内容,返回json格式数据,如果是跨域请求可以用jsonp返回,通过jq的append()到某个元素后面
  • 此时分页的page+1,可以在“加载更多”按钮上把总页数和当前页用自定义属性标识,如data-page=1,data-total=5
  • 如果当前页等于总页数时将”加载更多”按钮remove()掉

下面是jq和php代码: 

  • html结构
<ul class="clearfix moreadd">
    <li><a href="#" title="0123">
        <img class="lazyimg" src="img/grey.gif">
        <div class="info">
            <p class="name">123</p>
            <p class="txt">456</p>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值