卓越飞翔博客卓越飞翔博客

卓越飞翔 - 您值得收藏的技术分享站
技术文章11179本站已运行3223

帝国CMS二次开发无刷新Ajax加载更多列表信息插件

本帝国cms插件利用AJAX实现并无刷新读取更多的列表信息,用查看更多按钮来替代翻页功能,无限读取。

服务端源码:(保存路径为/e/action/get_news_index.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(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}
if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}
if(empty($_POST[limit])){$limit=15;}else{ $limit=(int)$_POST[limit];}
if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}
if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}
if(empty($_POST[small_length])){$small_length=500;}else{ $small_length=(int)$_POST[small_length];}
$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[titlepic]==''){
$r[titlepic]=$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];
?>


" target="_blank">" width=160 height=100 />

" target="_blank"><?=$r[title]?>

<?=$smalltext?>

<?=date("Y-m-d",$r[newstime])?>"><?=$classname?>

<?php } } } db_close(); $empire=null; ?>

前端JS脚本同时实现代码:

$(function(){
var i = 1; //设置当前页数
$('#loadmore').on('click',function(){
$.ajax({
url : '/e/action/get_news_index.php',
type:'POST',
data:{"next":i,'table':'news','action':'getmorenews','limit':15,'small_length':120},
dataType : 'html',
beforeSend:function(){
$("#loadmore").show().html('正在努力读取中...');
$('#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;
}
}
});
});
});

ajax命令服务端参数说明

next:第几页

table:调用数据表

limit:每次调用数量

small_length:概述撷取字符数

length:标题撷取字符数

classid:调用栏目,允许多个,如1,2,3,4  特别注意,必须就是调用同一数据表的栏目

orderby:排序,预设就是newstime,传什么就按什么去排序,如 id

myorder:正反序,预设是asc,传值怎为desc

除此之外还须要有一个按钮来载入更多

点击加载更多内容

还须要一个图形数据的元素(id="showajaxnews")点击读取更多按钮后获取至的数据会新增到showajaxnews元素里面,在点击载入按钮之前我们需要预放一下数据在里面,这样的话打开页面就存有部分数据,点击载入按钮后新增至末尾!

参考模板代码:

帝国CMS二次开发无创下Ajax读取更多列表信息插件

本插件就是在jQuery之下实现,请务必引入jquery,否则无法正常运行!

卓越飞翔博客
上一篇: 帝国CMS二次开发灵动标签调用外部数据
下一篇: 《帝国网站管理系统》新手教程下载

相关推荐

留言与评论(共有 0 条评论)
   
验证码:
隐藏边栏