多折点
一个专注各类有用知识分享的网站

帝国CMS数据列表加载更多,帝国CMS实现点击加载更多

文章描述:

帝国CMS数据列表加载更多实现方式

html

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>帝国CMS</title>
<script src="/skin/ui/js/jquery.min.js"></script>
</head>
<body>
	<div class="top"></div>
	<div class="header"></div>
	<div class="banner"></div>
	<div class="main">
		<div class="container">
			<div class="fl list">
				<div class="loop-list">
					<ul id="data-list">
						
					</ul>
				</div>
			</div>
			<div class="fr sidebar">
				
			</div>
		</div>
	</div>
	<div class="footer">
		
	</div>
</body>
</html>

 

style

*{ margin: 0; padding:0;}
body,html{ background: #f5f5f5;}

.top{ width: 100%; height:34px; background:#1f1d24; }
.header{ width: 100%; height:123px; background:#fff; }
.banner{ width: 100%; height:390px; background:#dfdfdf; }
.main{ background: #fff; padding-top:20px; padding-bottom: 20px; }
.container{ max-width: 1200px; margin:0 auto; }
.list{ width: 64%;}
.loop-list{}
.loop-list ul li{display: flex;justify-content: start;width: 100%; margin-bottom: 40px;}
.loop-list ul li .pic { position: relative; flex: 0 0 36%;overflow: hidden;}
.loop-list ul li .pic a img { width: 100%;}
.loop-list ul li .pic span{width:46px;height:24px;display:block;position:absolute;left:0;top:10px;background:url(../images/xingzuo.png?v=111) no-repeat -182px -1px;padding-left:5px;font-size:14px;color:#fff;line-height:24px}
.loop-list ul li .ptitle{font-size:20px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.loop-list ul li .ptitle a{color:#333;text-decoration: none;}
.loop-list ul li .instro{padding-left:30px}
.loop-list ul li .ptxt{font-size:14px;color:#999;line-height:26px;margin-top:15px;text-indent:2em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.loop-list ul li .prlsj{font-size:14px;color:#999;height:20px;margin-top:20px}
.loop-list ul li .prlsj .psl{float:left;padding-left:26px;position:relative}
.loop-list ul li .prlsj .psl .js{margin-right:5px;color:#e1a763;font-style:normal}
.loop-list ul li .prlsj .psl .icon{width:20px;height:14px;position:absolute;left:0;top:3px;background:url(../images/xingzuo.png?v=111) no-repeat -184px -29px}
.loop-list ul li .prlsj .psl i{font-style:normal}
.loop-list ul li .prlsj .ptime{float:right}

.footer{ width: 100%; height:195px; background:#686868; }

 

script

	var page = 1;//这个不是真正的页数,而是位移量
	var nextpage = 0;
	var wan=true;
	var totalheight = 0;   
	if(nextpage==0){
		$.ajax({
			url : '/kaifamei/sy-getajax.php',
			type:'get',
			data:{'next':0},
			dataType : 'html',
			beforeSend:function(){
				wan=false;
				$('#moreload').show();
			},
			success : function(str){
				if(str!=""){
					$('#data-list').append(str);
					nextpage++;
					wan=true;
					$('#moreload').hide();
				}else{
					$('#moreload').show();
				}
				
				
			}
		});
	 }
    function loadData(){   
		 totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 
		 if ($(document).height()-200 <= totalheight && wan==true) {  // 说明滚动条已达底部  
			page = nextpage;
			$.ajax({
				url : '/kaifamei/sy-getajax.php',
				type:'get',
				data:{'next':page},
				dataType : 'html',
				beforeSend:function(){
					wan=false;
				    $('#moreload').show();
				},
				success : function(str){
					if(str!=""){
						$('#data-list').append(str);
						nextpage++;
						wan=true;
					    $('#moreload').hide();
					}else{
						$('#moreload').hide();
					}
				}
			});
		}
	}
    $(window).scroll( function() {   
		loadData();  
    });

 

php


require('../e/class/connect.php'); 		// 配置和函数
require('../e/class/db_sql.php'); 		// 数据库操
require('../e/data/dbcache/class.php'); // 栏目缓存
$link=db_connect(); 					
$empire=new mysqlquery();
$editor=1; // 声明目录层次

//-------- 分页参数 --------
$page=(int)$_GET['next'];
$start=0;
$line=10; 				//每页显示记录数
$page_line=8; 			//每页显示分页链接数
$offset=$page*$line; 	//总偏移量

//-------- 查询SQL --------
//取得信息总数
$totalquery="select count(*) as total from {$dbtbpre}ecms_news ";
$num=$empire->gettotal($totalquery);
//select查询SQL
$query="select * from {$dbtbpre}ecms_news ";
$query.=" order by newstime desc limit $offset,$line";
$sql=$empire->query($query);

$listpage=page1($num,$line,$page_line,$start,$page,$search);//取得分页导航

// while($r=$empire->fetch($sql))
// {
// 	$array[]=array($r['id']);
// }
// print_r($array);

while($r=$empire->fetch($sql))
{
	$classid = $r['classid'];
	$class=$empire->fetch1("select * from {$dbtbpre}enewsclass where classid=".$classid." ");
	$classname = $class['classname'];
	
	$title = $r['title'];
	$url = $r['titleurl'];
	$titlepic = $r['titlepic'];
	$time = date('Y-m-d',$r['newstime']);

echo "<li>
  <div class='pic'> <a href='".$url."' target='_blank'> <img src='".$titlepic."'/> <span>".$classname."</span> </a> </div>
  <div class='instro'>
    <p class='ptitle'><a href='".$url."' target='_blank'>".$title."</a></p>
    <div class='ptxt'>
      <p>".$r['smalltext']."</p>
    </div>
    <p class='prlsj'> <span class='psl'><em class='icon'></em><em class='js'>0</em> <i>个星友都在看</i></span> <span class='ptime'>".$time."</span> </p>
  </div>
</li>
";
	
	// $array[]=array($r);
}

 

 

当前栏目


require('../e/class/connect.php'); 		// 配置和函数
require('../e/class/db_sql.php'); 		// 数据库操
require('../e/data/dbcache/class.php'); // 栏目缓存
$link=db_connect(); 					
$empire=new mysqlquery();
$editor=1; // 声明目录层次

$classid = (int)$_GET['classid'];

//-------- 分页参数 --------
$page=(int)$_GET['next'];
$start=0;
$line=10; 				//每页显示记录数
$page_line=8; 			//每页显示分页链接数
$offset=$page*$line; 	//总偏移量

//-------- 查询SQL --------
//取得信息总数
$totalquery="select count(*) as total from {$dbtbpre}ecms_news where classid = ".$classid." ";
$num=$empire->gettotal($totalquery);
//select查询SQL
$query="select * from {$dbtbpre}ecms_news where  classid = ".$classid." ";
$query.=" order by newstime desc limit $offset,$line";
$sql=$empire->query($query);

$listpage=page1($num,$line,$page_line,$start,$page,$search);//取得分页导航

while($r=$empire->fetch($sql))
{
	$classid = $r['classid'];
	$class=$empire->fetch1("select * from {$dbtbpre}enewsclass where classid=".$classid." ");
	$classname = $class['classname'];
	
	$title = $r['title'];
	$url = $r['titleurl'];
	$titlepic = $r['titlepic'];
	$time = date('Y-m-d',$r['newstime']);


	
}

 

连表查询

$totalquery="select count(*) as total from {$dbtbpre}ecms_news as a ";
$totalquery.=" left join {$dbtbpre}ecms_news_data_1 as b on a.id = b.id ";
$totalquery.="  where a.title like '%{$xzname}%' or b.newstext like '%{$xzname}%' ";
$num=$empire->gettotal($totalquery);

//select查询SQL
$query="select a.*,b.newstext from {$dbtbpre}ecms_news as a ";
$query.=" left join {$dbtbpre}ecms_news_data_1 as b on a.id = b.id ";
$query.="  where a.title like '%{$xzname}%' or b.newstext like '%{$xzname}%' ";
$query.=" order by newstime desc limit $offset,$line";

$sql=$empire->query($query);

转载:https://www.miyil.com/ecms/1004.html

在制作移动端页面时会用到,把以下代码添加到服务器,按步骤操作即可实现点击加载更多。

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(emptyempty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);} 
    if(emptyempty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';} 
    if(emptyempty($_POST[limit])){$limit=6;}else{ $limit=(int)$_POST[limit];} 
    if(emptyempty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';} 
    if(emptyempty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];} 
    if(emptyempty($_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[mtitlepic]==''){  
                $r[mtitlepic]=$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); 
      
    ?> 
    <!-- 以下代码是显示列表的标签模板 --> 
    <li class='news-list'> 
        <a href='<?=$urls?>' title='<?=$r[title]?>' class='date-link'> 
            <img src='<?=$r[mtitlepic]?>' alt='<?=$r[title]?>'  class='date-img-url'/> 
            <h4 class='date-title'><?=$r[title]?></h4><span class='act-datetime'><?=date("Y-m-d",$r[newstime])?></span> 
        </a> 
    </li> 
 
    <?php 
        } 
       } 
    } 
    db_close(); 
    $empire=null; 
?>

2、在帝国CMS模板后台,在对应的列表页面添加以下代码:
页面模板内容 (*)

<ul class="list-content  clear" id="showajaxnews">[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]</ul>    
<div class="more" id="loadmore">点击加载更多内容</div> 
<!-- 需要引入JQ文件 --> 
<script> 
$(function(){    
     var i = 1; //设置当前页数 
    $('#loadmore').click(function(){ 
        $.ajax({ 
            url : 'http://localhost/cms/e/action/getmore.php',  // 这是当前服务器的地址 
            type:'POST', 
            data:{"next":i,'table':'news','classid':'[!--self.classid--]','action':'getmorenews','limit':10,'small_length':120}, 
            dataType : 'html', 
            beforeSend:function(){ 
                $("#loadmore").show().html('<img src="/images/loaduai.gif" width=23/>  正在努力加载中...'); 
                   $('#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>

列表内容模板(list.var) (*)

<li class='news-list'> 
    <a href='[!--news.url--]' title='[!--title--]' class='date-link'> 
        <img src='[!--titlepic--]' alt='[!--title--]'  class='date-img-url'/> 
        <h4 class='date-title'>[!--title--]</h4><span class='act-datetime'>[!--newstime--]</span> 
    </a> 
</li>