当前位置 : 主页 > 网页制作 > JQuery >

点击分页按钮使页面置顶

来源:互联网 收集:自由互联 发布时间:2021-06-15
!DOCTYPE html title点击页面置顶/title meta charset ="UTF-8" script src="../js/jquery-3.4.1.min.js"/script body html div class="hidden" id="pageInfo" /div /body /html script var pageSize = 10; //每页显示10条数据 var pageNumber =

<!DOCTYPE html>

<title>点击页面置顶</title>

<meta  charset ="UTF-8">

<script src="../js/jquery-3.4.1.min.js"></script>

<body>

<html>

<div class="hidden" id="pageInfo">

</div>

</body>

</html>
<script>
var pageSize = 10; //每页显示10条数据
var pageNumber = 1; //当前页码
function getArticlePage(pageIndex){
$.ajax({
url: "https://api.xiaodoushebao.com/m/article/getArticleList",
type: "GET",
data: {
pageSize: pageSize,
pageNumber: pageIndex,
code: ‘‘
},
dataType: "json",
success: function(response) {
console.log(JSON.stringify(response))
var articles = response.list;
var total = response.total;
$("#articleList").html("");
for(var i = 0; i < articles.length; i++) {
var article = articles[i];
var html = ‘<div class="list_cont2" onmouseover="this.className=&#39;list_cont2&#39;" onmouseout="this.className=&#39;list_cont1&#39;">‘ +
‘<a target="_blank" href="../article/detail.html?id=‘ + article.id + ‘">‘ +
‘<h5>‘ + article.title + ‘<span>发布日期: ‘ + article.createDate + ‘</span><span>作者:‘ + article.author + ‘</span></h5>‘ +
‘<p id="content">‘ + article.introduction + ‘</p></a></div>‘;
$("#articleList").append(html);
}
$("#pageInfo").html("");
var classStyle="";
var pageIndex = response.pageIndex;
var pageHtml = "<a><<</a>";
if(pageIndex > 1){
classStyle = "act";
pageHtml = "<a onclick=‘getArticlePage(" + (pageIndex-1) + ")‘><<</a>";
}

var classStyle="";
for(var j = 1; j <= total; j++) {
if(j == pageIndex){
classStyle = "act";
pageHtml += ‘<a class="act" href="javascript:;">‘ + j + ‘</a>‘;
}else{
classStyle = "";
pageHtml += ‘<a href="javascript:;" onclick="getArticlePage(‘ + j + ‘)">‘ + j + ‘</a>‘;
}

}
if(pageIndex == total) {
pageHtml += ‘<a href="javascript:;">>></a>‘;
}else{
pageHtml += ‘<a href="javascript:;" onclick="getArticlePage(‘ + (pageIndex+1) + ‘)">>></a>‘;
}
$("#pageInfo").append(pageHtml);
}
});
}
$(function(){
$("#pageInfo").on(‘click‘,function(){
$(window).scrollTop(0);
$(window).scrollLeft(0);
});
});
$(function() {
getArticlePage(1);

});

</script>

网友评论