动易AJAX分页标签详细制作教程(动画版)

发布时间：2020-12-14 03:52:38 所属栏目：Dedecms 来源：网络整理

导读：呈现效果：用户点击分页后，清空容器中的数据，加载loading动画，Ajax取数据，呈现数据。 (多了个清空容器和加载动画的操作) ------------------------------------------------------------ 部署说明： 1.把普通标签改造为AJAX标签，只需在标签中选中允许A

呈现效果：
用户点击分页后，清空容器中的数据，加载loading动画，Ajax取数据，呈现数据。
(多了个清空容器和加载动画的操作)
------------------------------------------------------------
部署说明：
1.把普通标签改造为AJAX标签，只需在标签中选中“允许AJAX访问”即可。
2.将分页标签的链接加入锚点或者去除a链接应用onclick事件，防止跳转到页首。
3.引入Common.js文件(内部参数需要根据情况修改)。
4.引入AJAX页面刷新脚本(内部参数需要根据情况修改)。
5.部署完毕。
------------------------------------------------------------
HTML部分：

<script type="text/javascript" src="JS/Common.js" ></script>

<div>
<span id="itemlist"> 
{PE.Label id="AV-21_ajax分页" Titlelen="30" page="true" pagesize="8" urlpage="true" /}
</span>
</div>

<div id="urlpage"></div> 
------------------------------------------------------------
Ajax页面更新脚本：

<script type="text/javascript">

function changepage(pagenum,sourcename,spanname)
{
var x = new AjaxRequest('XML','itemlist'); //itemlist 为数据容器ID
x.labelname = sourcename;
x.currentpage = pagenum;
x.para = ['Titlelen=30','page=true','pagesize=8','currentPage='+pagenum];
//根据分页标签中的参数对这里进行修改
x.post('updatelabel','/ajax.aspx',function(s) {
var xml = x.createXmlDom(s);
var plstr = "";
for (var i=0; i < xml.getElementsByTagName("body")[0].childNodes.length; i++)
{
plstr += xml.getElementsByTagName("body")[0].childNodes.nodeValue;
}
document.getElementById("itemlist").innerHTML = plstr;
//itemlist 为数据容器ID
updatepage(spanname,xml);
});
}
function updatepage(spanname,xml)
{
if(parseInt(xml.getElementsByTagName("total")[0].firstChild.data) > 0)
{
var x = new AjaxRequest('XML');
x.labelname = spanname;
x.sourcename = sourcename;
x.total = xml.getElementsByTagName("total")[0].firstChild.data;
x.currentpage = xml.getElementsByTagName("currentpage")[0].firstChild.data;
x.pagesize = xml.getElementsByTagName("pagesize")[0].firstChild.data;
x.post('updatepage',function(s) {
var xml = x.createXmlDom(s);
if(document.getElementById("urlpage") != null)
{
var plstr = "";
for (var i=0; i < xml.getElementsByTagName("body")[0].childNodes.length; i++)
{
plstr += xml.getElementsByTagName("body")[0].childNodes.nodeValue;
}
document.getElementById("urlpage").innerHTML = plstr;
//urlpage 为分页标签容器ID
}
});
}
}
(function() {
changepage(1,'AV-21_ajax分页','JS_基本风格');
//根据情况修改参数
})();

</script>
------------------------------------------------------
Common.js文件(只列出需要修改的部分)

/* XMLHTTP状态显示字符 */
/* 如果其它AJAX应用受到Loading动画影响，需根据情况进行修改。 */
/* 动画的具体呈现效果请自行添加样式*/
var xml_http_building_link =
'<div><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait...</p></div>';
var xml_http_sending =
'<div><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait...</p></div>';
var xml_http_loading =
'<div"><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait...</p></div>';
var xml_http_data_in_processed =
'<div><img src="loading.gif" alt="Loading" /><p>Loading Now! Please Wait...</p></div>';
var xml_http_load_failed =
'<div><img src="error.gif" alt="Error" /><p>Oops!Service Error! The Code is:[err:errcode].</p><p style="color:red;font-size:14px;">Please Check It!</p></div>';
------------------------------------------------------------
Tips:
Common.js中的$和JQuery库有$冲突，建议更名。我系统中如果不更改，评论就会失败。
例如：function $ 更改为function $jq，就可以避免冲突
------------------------------------------------------------

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!