首页 ν 建站知识 ν 帝国cms列表页终极栏目实现点击加载更多 将分页符号替换成加载更多的方法 浏览量 收藏文章 海报

帝国cms列表页终极栏目实现点击加载更多 将分页符号替换成加载更多的方法

  帝国cms列表页终极栏目实现点击加载更多 将分页符号替换成加载更多的方法,经过本人多天的努力终于突破了这个瓶颈,实现了帝国cms列表页,终极栏目以及非终极栏目的点击加载更多功能,这里分享给大家,喜欢的给点个赞哦!

  首先我们讲下,如何实现终极栏目下的加载更多内容

  第一,在网站的根目录下/e/action/目录下上传一个文件(命名自定义即可,这里命名为listg.php),此文件便是重要的开发文件,安全性这快没经过测试呢,不过可以放心使用,设置好权限即可。

  文件内容为:以下几块全都是listg.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=10;}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];}

    $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];
            $newstime = date("Y-m-d",$r[newstime]);
            ?>

//此处是轮加载代码记得实际用的时候这个备注要删除哦。这里为了方便单独给你备注下文件。这个代码自己写标签调用的话用里面的标签调用即可。

      <li class="plist">
          <div class='imgWrap  border_color'> <a href='<?=$urls?>' title='<?=$r[title]?>' ><img src="<?=$r[titlepic]?>"></a></div>
          <div class='infoWrap'>
            <h3 class='productTitle'><span class='name'><a href='<?=$urls?>'>
              <?=$r[title]?>
              </a> </span></h3>
            <p class='code'></p>
            <p class='mark'></p>
          </div>
        </li>

<?php
        }
    }
}
db_close();
$empire=null;
?>

    第二,将下面的内容放到终极栏目列表模板中。当人然记得引入一个jq文件哦。引入不对也会出问题,这里下方给出了大家整体的包可以下载。
    

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

            <ul class='productListCont' id='showajaxnews'>
              [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
              <div class='clear'></div>
            </ul>
            <div class='more' id='loadmore'>查看更多 </div>

    第三新闻内容模板(list.var))里面的代码。其实就跟listg.php文件中的代码是一样的。

              <li class="plist">
                <div class='imgWrap  border_color'> <a href='[!--titleurl--]'><img src="[!--titlepic--]"></a></div>
                <div class='infoWrap'>
                  <h3 class='productTitle'><span class='name'><a href='[!--titleurl--]'>[!--title--]</a> </span></h3>
                  <p class='code'></p>
                  <p class='mark'></p>
                </div>
              </li>

    至此,终极栏目下的改在完成了,但是如果我们的页面是封面形式的,那么这个终极栏目下的东西就会失去效果,接下来改如何操作呢?


     其次我们讲解: 非终极栏目列表实现点击加载更多功能。
     方法其实跟上面的一样,只需要在列表模板中增加一个查询共能即可。
     代码如下:(为了能直观看到问题,第二,第三的改造全都写在了下面,维度不需要改造的就是listg.php文件)

    此方法针对的是封面栏目调用子栏目下的文章。

<script src="/skin/yilouming/js/jquery.min.js"></script> 
<?php 
 
$tsql2=$empire->query("select * from {$dbtbpre}enewsclass where bclassid='$GLOBALS[navclassid]'");
 
$i=0;
 
$aex= array();
 
while($tr=$empire->fetch($tsql2)){
 
$aaa2=$tr['classid'];
 
$aex[$i]=$aaa2;
 
$i++;
 
}
 
$chare = implode(",", $aex);
 
?>
<script>
$(function () {
  var i = 1; //设置当前页数
  $('#loadmore').click(function () {
    $.ajax({ 
        url : '/e/action/listgetmore.php',  // 这是当前服务器的地址 
        type:'POST', 
        data:{"next":i,'table':'news','area':'','classid':"<?=$chare?>",'action':'getmorenews','limit':10,'small_length':160}, 
        dataType : 'html', 
        beforeSend:function(){ 
            $("#loadmore").show().html('正在努力加载中...'); 
               $('#loadmore').attr('disabled','disabled'); 
        }, 
        success : function(data){ 
            if(data){ 
                $("#showajaxnews").append(data); 
                $("#loadmore").removeAttr('disabled'); 
                $("#loadmore").html('点击加载更多'); 
                i++; 
            }else{ 
                $("#loadmore").show().html("已全部加载完毕!"); 
                $('#loadmore').attr('disabled','disabled'); 
                return false; 
            }      
        } 
     }); 
  });
});
</script> 
              
<ul class='productListCont' id='showajaxnews'>
          [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
  <div class='clear'></div>
 </ul>
<div class='more' id='loadmore'>查看更多 </div>


 

    新闻内容模板(list.var))粗放囊的下面基本上可以忽略不记,配合上面使用。

              <li class="plist">
                <div class='imgWrap  border_color'> <a href='[!--titleurl--]'><img src="[!--titlepic--]"></a></div>
                <div class='infoWrap'>
                  <h3 class='productTitle'><span class='name'><a href='[!--titleurl--]'>[!--title--]</a> </span></h3>
                  <p class='code'></p>
                  <p class='mark'></p>
                </div>
              </li>

    至此,改造完成,亲测可用毋庸置疑!

附件下载地址:[ 下载地址 ]

打赏 赞( )
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

技术栈-技术优质的资源信息

加入技术栈 联系我们