采用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数据库配置
评论
3条评论huxinkai Lv.1
Chrome 105.0.0.0
Windows 回复
湖北省武汉市 联通
等待 Lv.1
Chrome 105.0.0.0
Windows 回复
不错不错
湖北省武汉市 联通
1+1 Lv.1
Chrome 72.0.3626.121
Windows 回复
12阿萨德
北京市 移动