码迷,mamicode.com
首页 > 其他好文 > 详细

点击分页按钮使页面置顶

时间:2019-10-15 19:06:24      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:ring   rip   api   EDA   amp   for   style   response   pen   

<!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>

点击分页按钮使页面置顶

标签:ring   rip   api   EDA   amp   for   style   response   pen   

原文地址:https://www.cnblogs.com/qiaomeier/p/11679326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!