在开发过程中总是遇到分页问题 刷新分页体验不好
写了一个公共方法配置分页生成的属性 (可以适当自定义修改)
注:需要引用jquery
主动触发 分页方法
myAjax(1)
function myAjax(page = 1, limit = 5 )
{
$.post('/index/list',
{
'page':page,
'limit':limit
},function(data, status){
if (status != 'success')
{
alert('请求失败!');
return false;
}
if(data.code == 0)
{
return false;
}
var str = ''
$(data.data).each(function(index, value){
str += '<li>'
str += '............你要替换的代码'
str += '</li>'
})
// 要替换的元素
$('.content ul').html(str)
if (page != 0)
{
// 追加分页数据
$('.page').html(data.pageData)
// 主要的触发公共方法
ajaxPage('.page', 'userMyCourse(%s, 5)')
}
}
)
}
公共方法 注:确保页面加载完毕后触发
// ajax分页时 处理分页数据
// @param tag 分页数据所在的标签
// @param func 方法名参数 %s 为页码 5为分页条数
// ajaxPage('.saspages .clearfloat', 'userMyCourse(%s, 5)')
function ajaxPage(tag = '', func = '')
{
var pageData = $(tag).children()
$(pageData).each(function(index, value){
// 获取标签类名
var className = $(value).attr('class')
// 处理选中与未选中状态
if (className != 'disabled' && className != 'active')
{
var _url = $(value).children('a').attr('href');
var _id = getUrlParam(_url, 'page');
// $(value).children('a').attr('href', 'javascript:void(0)');
$(value).children('a').attr({
'value': _id,
'href': 'javascript:void(0)',
'onclick':func.replace('%s', _id)
})
}
})
}
少量改动后就可以使用了