帝国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);
发布时间：2022/08/18
发表评论