采用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数据库配置
评论
32条评论3371508 Lv.1
Chrome 98.0.4758.9
Windows 回复
感谢楼主表情,好人一生平安
上海市徐汇区 联通漕河泾数据中心
Antonidas Lv.1
Chrome 111.0.0.0
Mac OS X 10.15.7 回复
支持一下,黑蜘蛛博客有你更精彩
陕西省西安市 电信
cyn070033 Lv.1
Sogou Explorer
Windows 回复
感谢楼主
,好人一生平安
北京市 移动
19862270361 Lv.1
LBrowser 8.0.0.1
Windows 回复
楼主加油
,期待更好的内容
山西省 电信
zhongxia Lv.1
Safari 15.6.1
Mac OS X 10.15.7 回复
看看
北京市 移动
rocketman Lv.1
Chrome 107.0.0.0
Mac OS X 10.15.3 回复
棒极了
广东省 移动
smq1996 Lv.1
Chrome 107.0.0.0
Windows 回复
感谢分享,这个网站太棒了
浙江省 移动
love123 Lv.1
Chrome 105.0.0.0
Windows 回复
浙江省金华市 电信
15854203969 Lv.1
Chrome 107.0.0.0
Windows 回复
henhao
山东省青岛市 移动
yuyuyu Lv.1
Chrome 107.0.0.0
Windows 回复
太好了
山东省青岛市 移动