discuz 首页 ajax 分页无刷新加载列表

当前位置： 首页 » 文章 » discuz 首页 ajax 分页无刷新加载列表

分类： 文章 2159阅读阅读模式

discuz 的首页列表是没有什么实际的效果，默认的，可以通过 diy 模式来添加文件列表，但这不是我喜欢的做法，通过代码实现效果，更能优化网站性能。

对于首页的列表，默认是没有 ajax 分页的，如果想要做成帖子列表页的 ajax 分页效果，需要改动几个文件，如下预览图：

点击加载更多将会加载下一页。

 

教程开始。

 

1、新建 PHP 文件

1.1、新建一个名为 ajax-load-page.php 文件，把该文件放到根目录，并放入以下代码：

  1. <?php
  2. require './source/class/class_core.php'; // 引入系统核心文件
  3. $discuz = & discuz_core::instance();
  4. $discuz->init(); // 创建及初始化对象
  5. loadcache('diytemplatename');
  6. include template('diy:portal/ajax_page'); // 调用单页模版文件，路径为:当前模板目录/portal/ajax_page.htm
  7. ?>

 

1.2、新建一个名为 ajax-load-msg.php 文件，把该文件放到：模板目录/php/ 文件夹中，请放入以下代码：

  1. <?php
  2. if(!defined('IN_DISCUZ')) {
  3. exit('Access Denied');
  4. }
  5. $fids='1,2,3';// 调用版块的 fid ，多个用半角逗号分开
  6. if($_GET['order']=='dateline' || $_GET['order']=='views' || $_GET['order']=='replies' || $_GET['order']=='digest'){
  7. $order= $_GET['order'];
  8. }else{
  9. $order= 'dateline';
  10. }
  11. $messagelength='500';// 内容字数
  12. $num = 20; // 每页展示数量
  13. $begin=($_G['page']-1)*$num;
  14. $manylist=array();
  15. require_once libfile('function/post');
  16. $rs=DB::query("
  17. SELECT t.*,p.message,p.pid,f.name
  18. FROM ".DB::table("forum_thread")." t
  19. LEFT JOIN ".DB::table("forum_post")." p on p.tid=t.tid
  20. LEFT JOIN ".DB::table("forum_forum")." f on f.fid=t.fid
  21. WHERE t.`fid` in ($fids) and t.displayorder>=0 and p.first=1
  22. group by t.tid
  23. ORDER BY t.`$order` DESC
  24. LIMIT $begin , $num");
  25. while ($rw=DB::fetch($rs)) {
  26. $rw['message']=messagecutstr($rw['message'],$messagelength,'');
  27. $rw['message']=dhtmlspecialchars($rw['message']);
  28. $manylist1[]=$rw;
  30. }
  31. foreach($manylist1 as $val){
  32. $tagdata = DB::fetch_all("SELECT tagid FROM ".DB::table('common_tagitem')." where itemid=".$val[tid]);
  33. $item=array();
  34. foreach($tagdata as $v1){
  35. $itemdata=DB::fetch_first("SELECT * FROM ".DB::table('common_tag')." where tagid=".$v1[tagid]);
  36. $item[]=$itemdata;
  37. }
  38. $val['itemdata']=$item;
  39. $manylist[]=$val;
  40. }
  41. $allnum=DB::result_first("select count(*) from ".DB::table("forum_thread")." where fid in ($fids)"); // 所有帖子
  42. $pagenav=multi($allnum,$num+10,$_G['page'],"portal.php?order=$order#threadsbody");
  43. $uid = $_G[uid];
  44. $magic = mysql_query("select * from ".DB::table('common_magiclog')." where uid=$uid");
  45. $magicnums = mysql_num_rows($magic);
  46. $medal = mysql_query("select * from ".DB::table('common_member_medal')." where uid=$uid");
  47. $medalnums = mysql_num_rows($medal);
  48. $task = mysql_query("select * from ".DB::table('common_task')." where available=2");
  49. $tasknums = mysql_num_rows($task);
  50. ?>

 

 

2、新建 htm 文件

新建名为 ajax_page.htm 文件，放到：模板目录/portal/ 文件夹中，并放入以下代码：

  1. <!--{eval $list_count=0;}-->
  2. <!--{loop $manylist $thread}-->
  3. <!--{eval $list_count+=1;}-->
  4. <div class="threadlst">
  5. <div class="threadhead">
  6. <span><a href="forum.php?mod=forumdisplay&fid=$thread[fid]"><strong>$thread[name]</strong></a></span><h2 {if $thread['message']} tip="<!--{echo cutstr($thread['message'],300)}-->" onmouseover="showTip(this)" {/if}><a href="forum.php?mod=viewthread&tid=$thread[tid]" onclick="atarget(this)" title="$thread[subject]">$thread[subject]</a><!--{if $thread['attachment'] == 2}--><img src="static/image/filetype/image_s.gif" alt="attach_img" title="图片附件" align="absmiddle"/><!--{/if}--> </h2>
  7. </div>
  8. <div class="threadbody">
  9. <div class="threadmessage"><!--{echo cutstr($thread['message'],300)}--></div>
  10. <div class="threadthumb">
  11. <!--{if $thread['attachment'] == 'number'}-->
  12. <!--{eval $table='forum_attachment_'.substr($thread['tid'], -1);}-->
  13. <!--{eval $query = DB::fetch_all("SELECT aid,tid,description,filename FROM ".DB::table($table)." WHERE tid='$thread[tid]' AND isimage!=0 ORDER BY `dateline` DESC LIMIT 0,12"); }-->
  14. <!--{eval $thread['pics']=count($query);}-->
  15. <div class="imglst{if $_G['cookie']['threadthumbhide']}dn{/if}">
  16. <!--{eval $i=1}-->
  17. <!--{loop $query $pic}-->
  18. <!--{if $i<6}-->
  19. <a href="forum.php?mod=viewthread&tid=$thread[tid]#aimg_$pic[aid]"><img src="{eval echo(getforumimg($pic[aid],0,120,80))}" alt="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}" title="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}"/></a>
  20. <!--{/if}-->
  21. <!--{eval $i++}-->
  22. <!--{/loop}-->
  23. </div>
  24. <!--{/if}-->
  25. </div>
  26. <div class="threadinfo">
  27. <div class="postauthor z">
  28. <a href="home.php?mod=space&uid=$thread[authorid]" rel="nofollw" c="1">$thread[author]</a> 发表于: {echo date('Y-m-d', $thread['dateline']);}
  29. </div>
  30. <div class="lastreply">
  31. <a href="forum.php?mod=redirect&tid=$thread[tid]&goto=lastpost#lastpost" title="跳转到最新回复楼层【$thread['replies']楼】">回复: $thread[replies]</a> / <span>浏览: $thread[views]</span>
  32. </div>
  33. <div>
  34. <!--{loop $thread[itemdata] $tag}-->
  35. <a href="misc.php?mod=tag&id=$tag[tagid]">$tag[tagname]</a>
  36. <!--{/loop}-->
  37. </div>
  38. </div>
  39. </div><!-- threadbody -->
  40. </div><!-- threadlst -->
  41. <!--{/loop}-->

 

想要风格 2 的改为

  1. <!--{eval $list_count=0;}-->
  2. <!--{loop $manylist $thread}-->
  3. <!--{eval $list_count+=1;}-->
  4. <article class="hm-post">
  5. <div class="post-head hm">
  6. <h1 class="post-title"><a href="forum.php?mod=viewthread&tid=$thread[tid]">$thread[subject]</a></h1>
  7. <div class="post-meta"><span>作者：<a href="home.php?mod=space&uid=$thread[authorid]" class="xg1" target="_blank">$thread[author]</a></span> ?
  8. <time class="post-date" datetime="{echo date('Y-m-d', $thread['dateline']);}" title="{echo date('Y-m-d', $thread['dateline']);}">{echo date('Y-m-d', $thread['dateline']);}</time>
  9. </div>
  10. </div>
  11. <div class="post-content">
  12. <p><!--{echo cutstr($thread['message'],300)}--></p>
  13. </div>
  14. <div class="post-morelink"><a href="forum.php?mod=viewthread&tid=$thread[tid]">阅读全文</a></div>
  15. <footer class="post-footer">
  16. <span>
  17. <a href="forum.php?mod=forumdisplay&fid=$thread[fid]">[ <strong>$thread[name] ] </strong></a>
  18. <!--{loop $thread[itemdata] $tag}-->
  19. <a href="misc.php?mod=tag&id=$tag[tagid]">$tag[tagname]</a>
  20. <!--{/loop}-->
  21. </span><span class="y">阅读数 $thread[views]</span>
  22. </footer>
  23. </article>
  24. <!--{/loop}-->

 

 

3、修改首页文件。

如果是门户为首页则修改「模板目录/portal/index.htm」文件，如果是论坛为首页则修改「模板目录/forum/discuz.htm」文件。

合适位置添加如下代码：

  1. <!--{eval include TPLDIR.'/php/ajax-load-msg.php';}-->
  2. <div class="home-main cl">
  3. <div class="hm-mainpost">
  4. <h3 class="hm-title">
  5. <!-- {if $_GET['order']=='dateline' || $_GET['order']==''} -->最新文章<!-- {elseif $_GET['order']=='replies'} -->最新回复<!-- {elseif $_GET['order']=='views'} -->热门文章<!-- {elseif $_GET['order']=='digest'} -->精华推荐<!-- {/if} -->
  6. <ul id="threadsbody" class="cl"><li{if $_GET['order']=='dateline' || $_GET['order']==''} class="a"{/if}><a href="portal.php?order=dateline" rel="nofollw">默认时间</a></li>/<li{if $_GET['order']=='replies'} class="a"{/if}><a href="portal.php?order=replies" rel="nofollw">回复时间</a></li>/<li{if $_GET['order']=='views'} class="a"{/if}><a href="portal.php?order=views" rel="nofollw">查看次数</a></li>/<li{if $_GET['order']=='digest'} class="a"{/if}><a href="portal.php?order=digest" rel="nofollw">精华推荐</a></li></ul>
  7. </h3>
  8. <div class="hm-body">
  9. <!-- 帖子列表 -->
  10. <div class="hm-thread" style="position: relative;">
  11. <!--{eval $list_count=0;}-->
  12. <!--{loop $manylist $thread}-->
  13. <!--{eval $list_count+=1;}-->
  14. <div class="threadlst">
  15. <div class="threadhead">
  16. <span><a href="forum.php?mod=forumdisplay&fid=$thread[fid]"><strong>$thread[name]</strong></a></span><h2 {if $thread['message']} tip="<!--{echo cutstr($thread['message'],300)}-->" onmouseover="showTip(this)" {/if}><a href="forum.php?mod=viewthread&tid=$thread[tid]" onclick="atarget(this)" title="$thread[subject]">$thread[subject]</a><!--{if $thread['attachment'] == 2}--><img src="static/image/filetype/image_s.gif" alt="attach_img" title="图片附件" align="absmiddle"/><!--{/if}--> </h2>
  17. </div>
  18. <div class="threadbody">
  19. <div class="threadmessage"><!--{echo cutstr($thread['message'],300)}--></div>
  20. <div class="threadthumb">
  21. <!--{if $thread['attachment'] == 'number'}-->
  22. <!--{eval $table='forum_attachment_'.substr($thread['tid'], -1);}-->
  23. <!--{eval $query = DB::fetch_all("SELECT aid,tid,description,filename FROM ".DB::table($table)." WHERE tid='$thread[tid]' AND isimage!=0 ORDER BY `dateline` DESC LIMIT 0,12"); }-->
  24. <!--{eval $thread['pics']=count($query);}-->
  25. <div class="imglst{if $_G['cookie']['threadthumbhide']}dn{/if}">
  26. <!--{eval $i=1}-->
  27. <!--{loop $query $pic}-->
  28. <!--{if $i<6}-->
  29. <a href="forum.php?mod=viewthread&tid=$thread[tid]#aimg_$pic[aid]"><img src="{eval echo(getforumimg($pic[aid],0,120,80))}" alt="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}" title="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}"/></a>
  30. <!--{/if}-->
  31. <!--{eval $i++}-->
  32. <!--{/loop}-->
  33. </div>
  34. <!--{/if}-->
  35. </div>
  36. <div class="threadinfo">
  37. <div class="postauthor z">
  38. <a href="home.php?mod=space&uid=$thread[authorid]" rel="nofollw" c="1">$thread[author]</a> 发表于: {echo date('Y-m-d', $thread['dateline']);}
  39. </div>
  40. <div class="lastreply">
  41. <a href="forum.php?mod=redirect&tid=$thread[tid]&goto=lastpost#lastpost" title="跳转到最新回复楼层【$thread['replies']楼】">回复: $thread[replies]</a> / <span>浏览: $thread[views]</span>
  42. </div>
  43. <div>
  44. <!--{loop $thread[itemdata] $tag}-->
  45. <a href="misc.php?mod=tag&id=$tag[tagid]">$tag[tagname]</a>
  46. <!--{/loop}-->
  47. </div>
  48. </div>
  49. </div><!-- threadbody -->
  50. </div><!-- threadlst -->
  51. <!--{/loop}-->
  52. </div>
  53. </div>
  54. <!--{if !$_GET['order']}--><div id="ajaxloading"><a href="javasctipt:void(0);">加载更多</a></div><!--{/if}-->
  55. <!--{if $_GET['order']}-->$pagenav <!--{/if}-->
  56. </div>
  57. </div>

 

在列表下方添加 js 代码：

注：考虑到 discuz 的 js 与 jq 的 $ 冲突，我改为了 jq ， var jq = jQuery.noConflict(true);

  1. jq(function () {
  2. var p = {if $_GET['page'] <> ''}$_GET['page']{else}1{/if}; //记录第几页
  3. jq('#ajaxloading').click(function () {
  4. p += 1; //下一页
  5. jq.ajax({
  6. url: 'ajax_page.php?basescript=portal',
  7. data: { page: p },
  8. cache: false,
  9. dataType: 'html',
  10. beforeSend:function(){
  11. jq("#ajaxloading").html("<a href='javasctipt:void(0);'>加载中...</a>");
  12. },
  13. error: function() {
  14. jq("#ajaxloading").html("<a href='javasctipt:void(0);'>请求出错，请重试</a>")
  15. },
  16. success: function (html) {
  17. if (html) {
  18. jq("#ajaxloading").html("<a href='javasctipt:void(0);'>加载更多</a>");
  19. jq('#ajaxloading').before(html);
  20. }else{
  21. jq("#ajaxloading").html("<a href='javasctipt:void(0);'>加载完毕</a>");
  22. }
  23. }
  24. });
  25. return false;
  26. });
  27. });

 

完毕，不考虑样式的情况下，内容完整了。

 

想要风格 2 的改为

  1. <!--{eval $list_count=0;}-->
  2. <!--{loop $manylist $thread}-->
  3. <!--{eval $list_count+=1;}-->
  4. <article class="hm-post">
  5. <div class="post-head hm">
  6. <h1 class="post-title"><a href="forum.php?mod=viewthread&tid=$thread[tid]">$thread[subject]</a></h1>
  7. <div class="post-meta"><span>作者：<a href="home.php?mod=space&uid=$thread[authorid]" class="xg1" target="_blank">$thread[author]</a></span> ?
  8. <time class="post-date" datetime="{echo date('Y-m-d', $thread['dateline']);}" title="{echo date('Y-m-d', $thread['dateline']);}">{echo date('Y-m-d', $thread['dateline']);}</time>
  9. </div>
  10. </div>
  11. <div class="post-content">
  12. <p><!--{echo cutstr($thread['message'],300)}--></p>
  13. </div>
  14. <div class="post-morelink"><a href="forum.php?mod=viewthread&tid=$thread[tid]">阅读全文</a></div>
  15. <footer class="post-footer">
  16. <span>
  17. <a href="forum.php?mod=forumdisplay&fid=$thread[fid]">[ <strong>$thread[name] ] </strong></a>
  18. <!--{loop $thread[itemdata] $tag}-->
  19. <a href="misc.php?mod=tag&id=$tag[tagid]">$tag[tagname]</a>
  20. <!--{/loop}-->
  21. </span><span class="y">阅读数 $thread[views]</span>
  22. </footer>
  23. </article>
  24. <!--{/loop}-->
  25. <!--{if !$_GET['order']}--><div id="ajaxloading"><a href="javasctipt:void(0);">加载更多</a></div><!--{/if}-->

 

js 部分

  1. jq(function () {
  2. var p = {if $_GET['page'] <> ''}$_GET['page']{else}1{/if}; //记录第几页
  3. jq('#ajaxloading').click(function () {
  4. p += 1; //下一页
  5. jq.ajax({
  6. url: 'ajax_page.php',
  7. data: { page: p },
  8. cache: false,
  9. dataType: 'html',
  10. beforeSend:function(){
  11. jq("#ajaxloading").html("<a href='javasctipt:void(0);' class=\"xg1\">加载中...</a>");
  12. },
  13. error: function() {
  14. jq("#ajaxloading").html("<a href='javasctipt:void(0);' class=\"xi1\">请求出错</a>")
  15. },
  16. success: function (html) {
  17. if (html) {
  18. jq("#ajaxloading").html("<a href='javasctipt:void(0);' class=\"\">加载更多</a>");
  19. jq('#ajaxloading').before(html);
  20. }else{
  21. jq("#ajaxloading").html("<a href='javasctipt:void(0);' class=\"xg1\">加载完毕</a>");
  22. }
  23. }
  24. });
  25. return false;
  26. });
  27. });

 

 

 

参考样式：

  1. /* 帖子列表 */
  2. .threadhead { }
  3. .threadhead strong { float: left; font-size: 12px; color: #999; background: #f3f3f3; padding: 4px 7px; font-weight: normal; margin: 3px 10px 0 0; -webkit-transition: all .25s linear; transition: all .25s linear; }
  4. .threadlst:hover .threadhead strong { background: {MENUBGCOLOR}; color: {MENUTEXT}; }
  5. .threadlst:hover .threadhead strong:hover { background: {MENUHOVERBGCOLOR}; }
  6. .threadhead h2 a { font-size: 18px; font-weight: normal; height: 32px; line-height: 32px; }
  7. .threadlst { background: #fff; border-bottom: 1px solid #eee; padding: 15px 15px 0; -webkit-transition: all .25s linear; transition: all .25s linear;}
  8. .threadlst:hover { background: #fafbfc; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.175); box-shadow: 0 0 15px rgba(0, 0, 0, 0.175); border-bottom: 1px solid #06b2b6; position: relative; z-index: 1; }
  9. .threadmessage { color: #777; font-size: 12px; font-weight: 300; text-indent: 2em; line-height: 1.75; margin: 10px 0; }
  10. .threadinfo { display: block; height: 22px; line-height: 22px; padding: 10px 0;}
  11. .threadinfo .lastreply { float: right; }
  12. .threadinfo * { color: #aaa;}
  13. .threadthumb img { max-width: 120px; -webkit-transition: all .25s linear; transition: all .25s linear; }
  14. .threadthumb img:hover { opacity: 0.75; -webkit-transform: scalescale(1.5); transform: scalescale(1.5); }
  15. .threadthumb a { display: inline-block; width: 120px; overflow: hidden; border: 1px solid #eee; margin: 0 5px; }
  16. #ajaxloading { text-align: center;}
  17. #ajaxloading a { display: block; background: #fff; padding: 9px 21px; margin: 15px 0; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; text-decoration: none; border: 1px solid #eee;-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.07);box-shadow: 0 1px 7px rgba(0, 0, 0, 0.07);}
  18. #ajaxloading a:hover { color: {MENUTEXT}; background: {MENUBGCOLOR}; border: 1px solid {MENUBGCOLOR}; }

 

样式效果预览：

 

风格 2 样式

  1. /* 文章列表 */
  2. .hm-post { padding: 35px; background: #fff; margin-bottom: 35px; position: relative; overflow: hidden; }
  3. .hm-post a { -webkit-transition: all 0.15s linear; transition: all 0.15s linear; }
  4. .hm-post .post-head a:hover { text-decoration: none; color: #3abc9d; }
  5. .hm-post .post-head .post-title { margin: 0; font-size: 2em; line-height: 1.2em; }
  6. .hm-post .post-head .post-meta { color: #959595; margin: 14px 0 0; }
  7. .hm-post .post-head .post-meta span { margin: 0 7px; white-space: nowrap; }
  8. .hm-post .post-content { margin: 30px 0; }
  9. .hm-post .post-content p { color: #787878; font-size: 14px; }
  10. .hm-post .post-morelink { text-align: right; }
  11. .hm-post .post-morelink a { display: inline-block; cursor: pointer; outline: none; text-decoration: none; padding: 7px 11px; border-radius: 2px; border: 1px solid #3abc9d; background: #3abc9d; color: #fff; }
  12. .hm-post .post-morelink a:hover { border: 1px solid #38b798; background: #38b798; }
  13. .hm-post .post-footer { margin-top: 30px; border-top: 1px solid #eee; padding: 21px 0 0; }
  14. .hm-post .post-footer span { color: #959595; line-height: 28px }
  15. .hm-post .post-footer a { color: #959595; margin-left: 7px }
  16. .hm-post .post-footer a:hover { color: #f4645f }

 

风格 2 预览图

 

 

完毕！

 

提示：回复可见的文章，回复评论成功后，需要刷新页面才能看到被隐藏的内容！
最后更新：2018年4月13日 永久固定短链接地址：
本文由大朗编写，如有错漏或其他不当，请在下方留言，欢迎指正。

相关文章

评论已关闭。