前端实现分页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="yemiannew.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<div class="big_div">
<div class="center_div" id="shouye" onclick="count('thefirstpage')">首页</div>
<div class="center_div" id="pre" onclick="pre(1)">上一页</div>
<div class="little_div" id="mid"></div>
<div class="center_div" id="next" onclick="next(1)">下一页</div>
<div class="center_div" id="moye" onclick="count('thelastpage')">末页</div>
<div class="center_div" id="tiaozhuan" onclick="count('turn')">跳转</div>
<input type="text" id="tiaozhuan_number"/>
</div>
</body>
<script type="text/javascript">
var currpage;
currpage=1;
var data="[1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100]";
data = data.substring(1,data.length-1);
var pageData = data.split(" ");
var nood_pre = "<div class='db-sig-detail flex'>"+
"<div class='l'>"+
"<p>美名评分</p>"+
"<strong>99</strong>分"+
"</div>"+
"<div class='m flex_div'>";
var nood_pro = "</div>"+
"<div class='r'>"+
" <span class='clickpop'>立即查看分析</span>"+
"</div>"+
"</div>";
var nood_list;
var nood="";
// for (var i = 0; i <(pageData.length-1)/4; i++) {
// nood="";
// for (var j = 0; j < 4; j++) {
// nood += nood_pre+pageData[i*4+j]+nood_pro;
// }
// $("#content").append(nood);
// }
for (var j = 0; j < 4; j++) {
nood += nood_pre+pageData[(currpage-1)*4+j]+nood_pro;
}
var $content = $("#content");
var $mid = $("#mid");
var $pre = $("#pre");
var $next = $("#next");
$content.append(nood);
$mid.append(midNood(1))
function midNood(currpage){
if (currpage < 3) {
currpage = 3;
}
if (currpage >= Math.ceil(pageData.length/4)) {
currpage = Math.ceil(pageData.length/4)-2;
}
var midnood=""
for (var i = 0; i <5; i++) {
midnood += "<div class='center_div' onclick='mid("+(currpage-2+i)+")'>"+(currpage-2+i)+"</div>";
}
return midnood;
}
function mid(currpage){
var nood="";
for (var j = 0; j < 4; j++) {
nood += nood_pre+pageData[(currpage-1)*4+j]+nood_pro;
}
$content.html(nood);
$mid.html(midNood(currpage))
$next.attr('onclick',"next("+ currpage +")");
$pre .attr('onclick',"pre("+ currpage +")");
}
function pre(currpage){
if(currpage < 1){
return;
}
var nood="";
for (var j = 0; j < 4; j++) {
nood += nood_pre+pageData[(currpage-2)*4+j]+nood_pro;
}
$content.html(nood);
$mid.html(midNood(currpage))
$next.attr('onclick',"next("+(currpage-1)+")");
$pre .attr('onclick',"pre("+(currpage-1)+")");
}
function next(currpage){
if(currpage >= Math.ceil(pageData.length/4)){
return;
}
var nood="";
for (var j = 0; j < 4; j++) {
nood += nood_pre+pageData[(currpage)*4+j]+nood_pro;
}
$content.html(nood);
$mid.html(midNood(currpage))
$next.attr('onclick',"next("+(currpage+1)+")") ;
$pre .attr('onclick',"pre("+(currpage+1)+")") ;
}
</script>
</html>
