帝国cms实现ajax首页、列表页加载更多功能、无限加载(图文)

帝国cms网站也能使用“加载更多”这项功能,使用帝国cms制作个人小网站、小博客移动端的列表页,使用这种方式实现分页,能够很好地提高用户体验。下面介绍帝国cms如何实现点击加载更多的功能。

点击加载更多.jpg

1、将以下代码上传至服务器(e/action/)目录下,命名为getmore.php。如果移动端后台和主端不是一套,要在移动端后台相应路径上传。

(本代码经过修改,支持父栏目列表页调用其各子栏目中的信息!)
<?php
    require('../class/connect.php');
    require('../class/db_sql.php');
    require('../data/dbcache/class.php');
    if($_POST[action] == 'getmorenews'){
    $table=htmlspecialchars($_POST[table]);
    if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}
    if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}
    if(empty($_POST[limit])){$limit=6;}else{ $limit=(int)$_POST[limit];}
    if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}
    if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}
    if(empty($_POST[small_length])){$small_length=500;}else{ $small_length=(int)$_POST[small_length];}
    
    // next:第几页
    // table:调用数据表
    // limit:每次调用数量
    // small_length:简介截取字符数
    // length:标题截取字符数
    // classid:调用栏目,允许多个,如1,2,3,4  特别注意,必须是调用同一数据表的栏目
    // orderby:排序,默认是newstime,传什么就按什么来排序,如 id
    // myorder:正反序,默认是asc,传值怎为desc
    $link=db_connect();
    $empire=new mysqlquery();
    $num =(int)$_POST['next'] *$limit;
     
      if($table){
            $sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");
     
        while($r=$empire->fetch($sql)){
     
            if($r[titlepic]==''){ 
                $r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif";
            }
        $oldtitle=stripSlashes($r[title]);
        $title=sub($oldtitle,'',$length);
        $smalltext=stripSlashes($r[smalltext]);
        $smalltext=sub($smalltext,'',$small_length);
        $classname=$class_r[$r[classid]][classname];
        $newsurl=$public_r[newsurl];
        $classurl=$newsurl.$class_r[$r[classid]][classpath];
        $urls = sys_ReturnBqTitleLink($r);
        $onclick = stripSlashes($r[onclick]);
    ?>
    <!-- 以下代码是显示列表的标签模板 开始-->
    <li>
        <div class="li-box clearfix">
            <a href="<?=$urls?>" class="img fl"><img src="<?=$r[titlepic]?>" alt="<?=$r[oldtitle]?>"></a>
            <div class="txt-box">
                <p class="txt"><a title="<?=$r[oldtitle]?>" href="<?=$urls?>"><?=$r[title]?></a></p>
                <div class="info clearfix">
                    <span class="zan"><i class="iconfont"></i><?=$onclick?>人阅读</span>
                    <span class="collect"><i class="iconfont"></i><?=date("Y-m-d",$r[newstime])?></span>
                    <span class="author"><img src="<?=$public_r[news.url]?>skin/liuq_phone/images/user_mini.png">刘强</span>
                </div>
            </div>
        </div>
    </li>
    <!-- 以下代码是显示列表的标签模板 结束-->
    <?php
        }
       }
    }
    db_close();
    $empire=null;
?>

2、在帝国cms后台,对应列表模板中添加如下代码:

<script>
<?
  //此部分功能:父栏目列表页调用各子栏目下的信息
  $nclassid =$GLOBALS[navclassid];//获取当前栏目ID
  $islast=$empire->fetch1("select * from {$dbtbpre}enewsclass where classid=".$nclassid); //判断当前栏目是否是终极栏目
  if($islast[islast]==0){
    $nclassid = $islast[sonclass];
    $nclassid = substr($nclassid,1);
    $nclassid = substr($nclassid, 0, -1); 
    $nclassid = str_replace("|",",",$nclassid);
  }
?>

$(function(){   
    var i = 1; //设置当前页数
    $('#loadmore').click(function(){
        $.ajax({
            url : 'https://www.wentong.org/e/action/getmore.php',    // 这是当前服务器的地址
            type:'POST',
            data:{"next":i,'table':'news','classid':'<?=$nclassid?>','action':'getmorenews','limit':10,'small_length':120},
            dataType : 'html',
            beforeSend:function(){
                $("#loadmore").show().text('正在努力加载中...');
                   $('#loadmore').attr('disabled','disabled');
                   $('#loadmore').css("color","#fff");
            },
            success : function(data){
                if(data){
                       $("#showajaxnews").append(data);
                       $("#loadmore").removeAttr('disabled');
                      $("#loadmore").text('点击加载更多');
                    $('#loadmore').css("color","#fff");
                    i++;
                }else{
                    $("#loadmore").show().text("已全部加载完毕!");
                    $('#loadmore').attr('disabled','disabled');
                    $('#loadmore').css("color","#fff");
                    return false;
                }     
            }
        });
    });
});
</script>  

3、根据自己网站列表页模板list.var中的内容,修改getmore.php文件中标签模板代码:

列表模板代码.jpg

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:帝国cms实现ajax首页、列表页加载更多功能、无限加载(图文)