采用php知识再结合shark-ui组件,开发的无刷新分页代码,仿Bootstrap分页样式css,3种方法显示加载数据!javascript代码:<script type="text/javascript">
$("#list").load("data.php?page=1");
var mypager = $.fn.sharkPager({
page: 1,
totalPages: <? echo $pages;?>, //总页数
hl: {
firstpage: 'first',
prevpage: 'previous',
nextpage: 'next',
lastpage: 'last',
gopage: 'go'
},
segmentSize: 5, //显示页码长度
startFrom: 1, //起始页
gopage: true, //跳转按钮
onPageChanged: function(p) {
console.log('跳转到第:' + p + '页'); //当前页数
//方法1
//$("#list").load("data.php?page="+p); //加载页面
//方法2
$.post("data.php", {page: p}, function(data) {
$("#list").html(data);
});
//方法3
/*
$.ajax({
type: "POST",
url: "data.php",
data: {page: p},
success: function(data){
$("#list").html(data);
}
});
*/
}
});
$('#pagerContainer').append(mypager.component);
</script>使用方法:1.导入article.sql2.修改data.php和 index.php数据库配置
评论
8条评论jixxss Lv.1
Chrome 131.0.0.0
Windows 回复
安徽省宿州市 电信
664050598 Lv.1
Chrome 123.0.0.0
Windows 回复
实在是太简约了,不错
江苏省南京市 电信
qwe258852 Lv.1
Chrome 111.0.0.0
Windows 回复
楼主加油
,期待更好的内容
天津市 联通
qwe258852 Lv.1
Chrome 111.0.0.0
Windows 回复
天津市 联通
qwe258852 Lv.1
Chrome 111.0.0.0
Windows 回复
天津市 联通
schchenke Lv.1
Chrome 95.0.4638.69
Windows 回复
学习下吧
四川省成都市 移动
rt01234 Lv.1
Chrome 102.0.0.0
Windows 回复
看看
浙江省 电信
wlakys Lv.1
Chrome 69.0.3947.100
Windows 回复
学习下吧
河南省郑州市 移动