用户点击分页后,清空容器中的数据,加载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> <!-- 数据容器,注意ID -->
{PE.Label id=AV-21_ajax分页 Titlelen=30 page=true pagesize=8 urlpage=true /}
</span>
</div>
<div id=urlpage></div> <!-- 分页标签容器,注意ID -->
------------------------------------------------------------
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,就可以避免冲突
------------------------------------------------------------
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。