页面无刷新
<ul class="m-demo" id="data1"></ul>
<div class="m-paging" id="paging1"></div>
$.paging({
url:'../data.json',
pCount:5,
wrap:$('#paging1'),
loading:{
wrap:$('#data1')
},
echoData:function(data){
if(data.result == 'success'){
var html = (function(list){
var arr = [];
$.each(list, function(k, v){
arr.push('
'+ v.buname +'');
});
return arr.join('');
})(data.list);
$('#data1').html(html);
}
}
});
传统页面刷新
<ul class="m-demo" id="data2"></ul>
<div class="m-paging" id="paging2"></div>
$.ajax({
url:'../data.json',
dataType:'json',
cache:false,
success:function(res){
var page = parseInt(tools.getParam('page')||1);
var crt = (page-1)*4;
var data = res.slice(crt, crt+4);
var arr = [];
$.each(data, function(k, v){
arr.push('
'+ v.title +'');
});
$('#data2').html(arr.join(''));
window['pages'] = new Paging({
pCount:4,
aCount:res.length,
current:page,
wrap:$('#paging2'),
isFull:false,
refreshCallback:function(current){
tools.jumpUrl(tools.setParam('page', current));
}
});
pages.query('refresh');
}
});
滚动加载
<a href="javascript:void(0);" class="menu" type="">全部</a>
<a href="javascript:void(0);" class="menu e-ml10" type="1">按价格</a>
<a href="javascript:void(0);" class="menu e-ml10" type="2">按访问量</a>
<div class="m-demo" id="data3" style="height:250px; overflow:auto;">
<ul id="boxs"></ul>
</div>
window['page'] = new Paging({
url:'http://192.168.1.109/data/?callback=?',
pCount:10,
loading:{
wrap:$('#data1')
},
scroll:{
enable:true,
container:'#data3'
},
echoData:function(res, type){
var tpl = '';
$.each(res.list, function(k, v){
tpl += '
'+ v.buname +'';
});
if(type === 'jump'){
$('#boxs').append(tpl);
}
else{
$('#boxs').html(tpl);
this.container.scrollTop(0)
}
}
});
$('.menu').click(function(){
var me = $(this);
if(me.hasClass('s-crt')){
return;
}
me.addClass('s-crt').siblings('.menu').removeClass('s-crt');
page.condition.type = me.attr('type');
page.query(true);
}).eq(0).click();