帝国cms 加载更多升级版

加载更多博主曾经多次折腾最终得出以下两个版本 适用于大多数项目
至于加载更多的gif 图片 请自己找素材吧

JS 调用部分 (栏目设置中 最好显示12条数据 匹配js拉取数据 且不重复  也可以自行设置测试条数)
本例按当前栏目拉取 适合列表页
  1. <script>
  2. $(function(){
  3. var i = 1; //设置当前页数
  4. window.onscroll = function(){
  5. var scrollTop = document.body.scrollTop;
  6. var bot = 50; //bot是底部距离的高度
  7. if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
  8. $.ajax({
  9. url : '/e/action/getmore.php',
  10. type:'POST',
  11. data:{"next":i,'table':'news','classid':'[!--self.classid--]','action':'getmorenews','limit':12,'small_length':120},
  12. dataType : 'html',
  13. beforeSend:function(){
  14. $("#loadmore").show().html('<img src="/images/loaduai.gif" width=23/> 正在努力加载中...');
  15. $('#loadmore').attr('disabled','disabled');
  16. },
  17. success : function(data){
  18. if(data){
  19. $("#showajaxnews").append(data);
  20. $("#loadmore").removeAttr('disabled');
  21. $("#loadmore").html('下拉加载更多');
  22. i++;
  23. }else{
  24. $("#loadmore").show().html("已全部加载完毕!");
  25. $('#loadmore').attr('disabled','disabled');
  26. return false;
  27. }
  28. }
  29. });
  30. }
  31. }
  32. });
  33. </script>
容器和显示按钮showajaxnews
  1. <ul id="showajaxnews">
  2. [!--empirenews.listtemp--]
  3. <!--list.var1-->
  4. [!--empirenews.listtemp--]
  5. </ul>
  6. <!-- 资讯列表模板 -->
  7. <a class="go-more" id="loadmore">加载更多</a>
后端数据结构 (/e/action/getmore.php)
  1. <?php
  2. require('../class/connect.php');
  3. require('../class/db_sql.php');
  4. require('../data/dbcache/class.php');
  5. if($_POST[action] == 'getmorenews'){
  6. $table=htmlspecialchars($_POST[table]);
  7. if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}
  8. if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}
  9. if(empty($_POST[limit])){$limit=12;}else{ $limit=(int)$_POST[limit];}
  10. if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}
  11. if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}
  12. if(empty($_POST[small_length])){$small_length=500;}else{ $small_length=(int)$_POST[small_length];}
  13. $link=db_connect();
  14. $empire=new mysqlquery();
  15. $num =(int)$_POST['next'] *$limit;
  16. if($table){
  17. $sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");
  18. while($r=$empire->fetch($sql)){
  19. if($r[mtitlepic]==''){
  20. $r[mtitlepic]=$public_r[news.url]."e/data/images/notimg.gif";
  21. }
  22. $oldtitle=stripSlashes($r[title]);
  23. $title=sub($oldtitle,'',$length);
  24. $smalltext=stripSlashes($r[smalltext]);
  25. $smalltext=sub($smalltext,'',$small_length);
  26. $classname=$class_r[$r[classid]][classname];
  27. $newsurl=$public_r[newsurl];
  28. $classurl=$newsurl.$class_r[$r[classid]][classpath];
  29. $urls = sys_ReturnBqTitleLink($r);
  30. ?>
  31. <li>
  32. <a href="<?=$urls?>">
  33. <div class="media-image">
  34. <img src="<?=$r[mtitlepic]?>" alt="<?=$r[title]?>" width=60 height=60 />
  35. </div>
  36. <div class="media-content">
  37. <h3 class="title"><?=$r[title]?></h3>
  38. <p class="meta">
  39. <span class="meta-time"><?=date("Y-m-d",$r[newstime])?></span>
  40. </p>
  41. </div>
  42. </a>
  43. </li>
  44. <?php
  45. }
  46. }
  47. }
  48. db_close();
  49. $empire=null;
  50. ?>
另一个版本 点击后再拉取数据 适合首页等部位按制定栏目拉取
  1. $(function(){
  2. var i = 1; //设置当前页数
  3. $('#loadmore').click(function(){
  4. $.ajax({
  5. url : 'http://m.zhaohuati.com/e/action/getmore.php',
  6. type:'POST',
  7. data:{"next":i,'table':'news','classid':'14','action':'getmorenews','limit':12,'small_length':120},
  8. dataType : 'html',
  9. beforeSend:function(){
  10. $("#loadmore").show().html('<img src="/images/loaduai.gif" width=23/> 正在努力加载中...');
  11. $('#loadmore').attr('disabled','disabled');
  12. },
  13. success : function(data){
  14. if(data){
  15. $("#showajaxnews").append(data);
  16. $("#loadmore").removeAttr('disabled');
  17. $("#loadmore").html('点击加载更多');
  18. i++;
  19. }else{
  20. $("#loadmore").show().html("已全部加载完毕!");
  21. $('#loadmore').attr('disabled','disabled');
  22. return false;
  23. }
  24. }
  25. });
  26. });
  27. });
注意:
  1. next:第几页
  2. table:调用数据表
  3. limit:每次调用数量
  4. small_length:简介截取字符数
  5. length:标题截取字符数
  6. classid:调用栏目,允许多个,如1,2,3,4 特别注意,必须是调用同一数据表的栏目
  7. orderby:排序,默认是newstime,传什么就按什么来排序,如 id
  8. myorder:正反序,默认是asc,传值怎为desc
本项目需要引入jq
博主使用的是jquery-1.8.3.min.js   使用者可以自行测试版本
不提供JQ文件
后来对这个功能的需求又升级了  可以参考

非凡网 博客

我只是帮你筛选价值。

你也许喜欢

18 回复

  1. 孟垂博说道:

    这个还需要设置其他地方吗,我添加上怎么不可以呢

  2. 孟垂博说道:

    这个还需要设置其他地方吗,我添加上怎么不可以呢

  3. 孟垂博说道:

    太感谢了,现在遇到一个问题,内容页面怎么实现呢

  4. 孟垂博说道:

    太感谢了,现在遇到一个问题,内容页面怎么实现呢

  5. 黄嘉铭说道:

    我哦的获取当前栏目ID这个地方有错误,提示是这样的You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘[!–self.classid–]) order by newstime desc limit 5,5’ at line 1
    SELECT * FROM `***_ecms_news` where classid in([!–self.classid–]) order by newstime desc limit 5,5

  6. 有勇有谋说道:

    下拉加载不能用,初始下拉的时候,会出现三组同样的数据!

  7. 安千里说道:

    加载指定的栏目后,会加载其他栏目的信息,怎么限制加载完指定的栏目后,会自动结束

  8. qzuser说道:

    都正确了 就是读不出来啊?怎么搞也不行呢?

发表评论