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

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

大致思路是：

首先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>
            <p class="tag clearfix"><i class="fl">2018年08月08日 09:34 </i><i class="fr">来源：白鲸出海</i></p>
        </div>
    </a></li>					
</ul>
<span class="more" data-total="5" data-page="1">加载更多</span>

jQuery

<script type="text/javascript">
    $('.more').on('click',function(){
    var baseurl = $('#baseurl').val();
    var type  = $.trim($(this).attr('data-type'));
    var total = parseInt($(this).attr('data-total'));
    var page  = parseInt($(this).attr('data-page'));

    $.ajax({
        url: baseurl+'index.php',
        type: 'get',
        dataType: "jsonp",
        data: {type:type,page:page+1},
        success:function(res){
            $('.moreadd').append(res);
            $('.more').attr('data-page',page+1);
            if(page+1 == total){
                $('.more').remove();
            }
         }
    });
});
</script>

php

function ajaxNewsFunc(){
	global $_NEWSTYPE,$DOMAIN;
	$callback = $_GET['callback'];
	$type    = trim($_GET['type']);
	$page    = (int)$_GET['page'];
	$topicid = (int)$_GET['topicid'];	//专题id

	$pagesize = 20;
	$limit = 'limit '.($pagesize*$page-$pagesize).','.$pagesize;

	$where = $type ? "type in ($keys) and status = 1" : "status = 1";

	$list  = mysqli_query();

	$html = '';
	if($list){
		foreach ($list as $k => $val) {
			$val['fromid'] = $val['fromid'] ? $val['fromid'] : '123';
			$html .= '<li><a href="'.$DOMAIN['index'].$type.'/'.$val['id'].'.html" title="'.$val['title'].'">';
			$html .= '<img class="lazyimg" src="'.$DOMAIN['lazyimg'].'" data-url="'.$DOMAIN['image'].$val['imgurl'].'" width="200" height="130">';
			$html .= '<div class="info">';
			$html .= '<p class="name">'.$val['title'].'</p>';
			$html .= '<p class="txt">'.$val['descrip'].'</p>';
			$html .= '<p class="tag clearfix"><i class="fl">'.date('Y-m-d H:s').'</i><i class="fr">来源：'.$val['fromid'].'</i></p>';
			$html .= '</div>';
			$html .= '</a></li>';
		}
	} 
	$data['callback'] = $callback;
	$data['data']     = $html;
	echo $callback.'('.json_encode($html).')';
}

注：分页数据可以用jq循环解析，此处是用php直接返回html代码(jsonp格式)

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

猜你喜欢