采用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数据库配置
评论
29条评论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 回复
太好了
山东省青岛市 移动
goosoo Lv.1
Firefox 106.0
Windows 回复
非常不错
上海市 移动
谭谭123 Lv.1
Chrome 107.0.0.0
Windows 回复
回复了goosoo:
支持一下,黑蜘蛛博客有你更精彩
中国 移动
huang Lv.1
Chrome 86.0.4240.198
Windows 回复
试一下
广东省广州市 移动
zc76873122 Lv.1
Chrome 102.0.0.0
Windows 回复
试一试
湖北省 电信