效果图:
功能:首尾页跳转,限制首尾页,标出当前在第几页,精准跳转到底*页,获取总页数
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.st1 {
width: 90%;
height: 32px;
background-color: #ddd;
margin-left: 5%;
margin-top: 30px;
}
.st2 {
width: 60px;
height: 32px;
background-color: #2ac;
float: left;
margin-left: 6px;
color: honeydew;
text-align: center;
line-height: 32px;
font-size: 13px;
}
.chosed {
background-color: red;
}
</style>
</head>
<body>
<!-- <input type="button" value="确定" onclick="m1(10)"> -->
<div id="div1" class="st1"></div>
</body>
<script type="text/javascript">
m1(13, 256, 10); //当前页索引,总页数,每页数量
function m1(index, allnum, pagesize) {
var allpage = allnum / pagesize;
allpage = parseInt(allpage);
allpage = allnum % 10 > 0 ? allpage + 1 : allpage;
if (index < 1) {
index = 1;
}
if (index > allpage) {
index = allpage;
}
var x = document.getElementById("div1"); //根据id获取关键字
var h = '<div class="st2" οnclick="m1(1,' + allnum + ',' + pagesize + ')">首页</div>';
h += '<div class="st2" οnclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ')">上一页</div>';
if (index < 3) {
if (index == 1) {
h += '<div class="st2 chosed" οnclick="m1(1,' + allnum + ',' + pagesize + ')">1</div>';
h += '<div class="st2" οnclick="m1(2 ,' + allnum + ',' + pagesize + ')">2</div>';
} else {
h += '<div class="st2" οnclick="m1(1,' + allnum + ',' + pagesize + ')">1</div>';
h += '<div class="st2 chosed" οnclick="m1(2 ,' + allnum + ',' + pagesize + ')">2</div>';
}
h += '<div class="st2" οnclick="m1(3,' + allnum + ',' + pagesize + ')">3</div>';
h += '<div class="st2" οnclick="m1(4,' + allnum + ',' + pagesize + ')">4</div>';
h += '<div class="st2" οnclick="m1(5,' + allnum + ', ' + pagesize + ') ">5</div>';
}
if (index >= 3 && index <= (allpage - 2)) {
h += '<div class="st2" οnclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ')">' + (index - 2) + '</div>';
h += '<div class="st2" οnclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ')">' + (index - 1) + '</div>';
h += '<div class="st2 chosed">' + index + '</div>';
h += '<div class="st2" οnclick="m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ')">' + (index + 1) + '</div>';
h += '<div class="st2" οnclick="m1(' + (index + 2) + ',' + allnum + ',' + pagesize + ')">' + (index + 2) + '</div>';
}
if (index > (allpage - 2)) {
h += '<div class="st2" οnclick="m1(' + (allpage - 4) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 4) + '</div>';
h += '<div class="st2" οnclick="m1(' + (allpage - 3) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 3) + '</div>';
h += '<div class="st2" οnclick="m1(' + (allpage - 2) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 2) + '</div>';
if (index == allpage) {
h += '<div class="st2" οnclick="m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 1) + '</div>';
h += '<div class="st2 chosed" οnclick="m1(' + allpage + ',' + allnum + ', ' + pagesize + ') ">' + allpage + '</div>';
} else {
h += '<div class="st2 chosed" οnclick="m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 1) + '</div>';
h += '<div class="st2" οnclick="m1(' + allpage + ',' + allnum + ', ' + pagesize + ') ">' + allpage + '</div>';
}
}
h += '<div class="st2" οnclick="m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ')">下一页</div>';
h += '<div class="st2" οnclick="m1(' + allpage + ',' + allnum + ',' + pagesize + ')">尾页</div>';
h += '<div class="st2">共' + allpage + '页</div>';
h += '<div class="st2">共' + allnum + '条</div>';
h += '<div class="st2"><input id="pageindex" type="text" style="width:50px;height:26px;border:0px;"></div>';
h += '<div class="st2" οnclick="gopage(' + allnum + ',' + pagesize + ')">跳转</div>';
x.innerHTML = h;
}
function gopage(allnum, pagesize) {
var text = document.getElementById("pageindex").value;
text = parseInt(text);
m1(text, allnum, pagesize);
}
</script>
</html>