1.页面需要引入jquery.js文件
2. 列表页合适位置添加以下代码(我是在<ul>中添加的,关键是要添加代码: id="showajaxnews",这样点击 点击添加更多 按钮时,列表内容就被添加到了<ul class="slLis wrap" id="showajaxnews">下面)
我的是这样的:<ul class="slLis wrap" id="showajaxnews">,大家对照自行修改。
3. 在列表页加上 点击加载更多 按钮。
我的是这样的:<a class="load_more_btn" id="loadmore" target="_self" style="display: block;">点击加载更多</a>
4. 在列表页</body>前加上以下js代码。
说明:
(1). 代码中 'limit':25 , 25需修改为你想点击一次加载更多时加载的条数。通常要修改成和 系统后台 → 系统设置 → 系统参数设置 → 信息设置 中的:前台结合项列表每页显示 25 个信息 这个数一样
(2). 代码中有 <img src="/skin/list/loaduai.gif" width=20/> 页面加载中...,所以需要在 /skin/list/ 下添加这个表示正在加载的GIF动画图标 loaduai.gif 。你也可以把图标放在别的位置,但要修改相应的这个 /skin/list/loaduai.gif 代码。
<script> $(function(){ var i = 1; //设置当前页数 $('#loadmore').click(function(){ $.ajax({ url : '/e/action/getmorearticle.php', type:'POST', data:{"next":i,'classid':'[!--self.classid--]','action':'getmorenews','limit':25,'small_length':120}, dataType : 'html', beforeSend:function(){ $("#loadmore").show().html('<img src="/skin/list/loaduai.gif" width=20/> 页面加载中...'); $('#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>
5. 在/e/action/下添加文件 getmorearticle.php(修改 $limit=25; 中的25和 js中的数字一样)
getmorearticle.php内容如下:
<?php require('../class/connect.php'); require('../class/db_sql.php'); require('../data/dbcache/class.php'); $actions = RepPostVar2($_POST[action]); $limits = (int)$_POST[limit]; $classids = (int)$_POST[classid]; $lengths = (int)$_POST[length]; $small_lengths = (int)$_POST[small_length]; if($actions == 'getmorenews'){ $table = 'news'; //如果下载列表页使用就把 news 换成 download if(empty($limits)){$limit=25;}else{ $limit=$limits;} if(empty($classids)){$where=null;}else{ $where='where classid in('.$classids.')';} if(empty($lengths)){$length=50;}else{ $length=$lengths;} if(empty($small_lengths)){$small_length=500;}else{ $small_length=$small_lengths;} $link=db_connect(); $empire=new mysqlquery(); $num =(int)$_POST['next'] *$limit; if($table){ $sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by newstime desc 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]); $titlepic=stripSlashes($r[titlepic]); $title=sub($oldtitle,'',$length); $smalltext=stripSlashes($r[smalltext]); $plnum=stripSlashes($r[plnum]); $classid=stripSlashes($r[classid]); $id=stripSlashes($r[id]); $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); ?> //以下修改成你的列表页模板的 列表内容模板(list.var) (*)的内容 <li> <a href="<?=$urls?>"> <img class="lazys" alt="<?=$r[title]?>" src="<?=$r[titlepic]?>" style="display: block;"/> </a> <div> <p><a href="<?=$urls?>"><?=$r[title]?></a></p> <div class="clearfix"> <a href="/e/pl/?classid=<?=$r[classid]?>&id=<?=$r[id]?>"> <span><?=$r[plnum]?></span><span> 评论</span> </a> <a href="<?=$r[titleurl]?>"> <span><?=$r[onclick]?> 浏览 </span></a></div> </div> </li> //以上修改成你的列表页模板的 列表内容模板(list.var) (*)的内容 <?php } } } db_close(); $empire=null; ?>
具体案例查看墨鱼工作室模版:https://www.moyublog.com/studio/629.html
本文地址:https://www.moyublog.com/notes/1246.html
加入我们:微信:搜索“Moyu-Blog” 帝国CMS模板客户群:QQ二群---909235407 QQ一群(已满)---106997031
版权声明:本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载请注明本文地址!