|
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>分页</title>
?? ??? ?<link rel="stylesheet" type="text/css" href="../static/css/paging.min.css" />
?? ?</head>
?? ?<style>
?? ??? ?#pre,
?? ??? ?#next,
?? ??? ?.page {
?? ??? ??? ?cursor: pointer;
?? ??? ??? ?color: #333333;
?? ??? ??? ?display: inline-block;
?? ??? ?}
?? ??? ?#total,
?? ??? ?#pre,
?? ??? ?#next {
?? ??? ??? ?display: inline-block;
?? ??? ??? ?color: #333333;
?? ??? ??? ?font-size: 13px;
?? ??? ?}
?? ??? ?.page,
?? ??? ?#pre,
?? ??? ?#next {
?? ??? ??? ?margin-left: 5px;
?? ??? ??? ?padding: 5px;
?? ??? ??? ?border: 1px solid #eee;
?? ??? ??? ?min-width: 31px;
?? ??? ??? ?text-align: center;
?? ??? ?}
?? ??? ?.dot {
?? ??? ??? ?margin-left: 5px;
?? ??? ?}
?? ??? ?.active {
?? ??? ??? ?background-color: #0a698f;
?? ??? ??? ?color: #fff;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<div id="content"></div>
?? ??? ?<div id="pagination">
?? ??? ??? ?<span id="pre">前一页</span>
?? ??? ??? ?<span id="page-box">
?? ??? ??? ??? ?<span class="page active">1</span>
?? ??? ??? ??? ?<span class="page">2</span>
?? ??? ??? ??? ?<span class="page">3</span>
?? ??? ??? ??? ?<span class="dot">...</span>
?? ??? ??? ??? ?<span class="page">4</span>
?? ??? ??? ??? ?<span class="page">5</span>
?? ??? ??? ??? ?<span class="page">6</span>
?? ??? ??? ?</span>
?? ??? ??? ?<span id="next">后一页</span>
?? ??? ??? ?<span id="total">共1条数据</span>
?? ??? ?</div>
?? ?</body>
?? ?<script src="../static/js/jquery-1.8.3.js"></script>
?? ?<script>
?? ??? ?var data = [
?? ??? ??? ?"item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10",
?? ??? ?];
?? ??? ?var page = {
?? ??? ??? ?currentpage: 1,
?? ??? ??? ?totle: 61,
?? ??? ??? ?pagesize: 10
?? ??? ?}
?? ??? ?var pages = page.totle % page.pagesize === 0 ? parseInt(page.totle / page.pagesize) : parseInt(page.totle / page
?? ??? ??? ?.pagesize) + 1;
?? ??? ?function getpages(page) {
?? ??? ??? ?var currentpage = page.currentpage;
?? ??? ??? ?var totle = page.totle;
?? ??? ??? ?var pagesize = page.pagesize;
?? ??? ??? ?$("#page-box").empty();
?? ??? ??? ?// debugger
?? ??? ??? ?var str = ""
?? ??? ??? ?if (pages <= 6) {
?? ??? ??? ??? ?for (var i = 0; i < pages; i++) {
?? ??? ??? ??? ??? ?str += '<span class="page">' + (i + 1) + '</span>'
?? ??? ??? ??? ?}
?? ??? ??? ??? ?$("#page-box").append(str)
?? ??? ??? ?} else if (pages > 6 && currentpage <= 3 || currentpage > (pages - 3)) {
?? ??? ??? ??? ?for (var i = 1; i <= 3; i++) {
?? ??? ??? ??? ??? ?str += '<span class="page">' + i + '</span>';
?? ??? ??? ??? ?}
?? ??? ??? ??? ?str += '<span class="dot">...</span>';
?? ??? ??? ??? ?for (var i = pages - 3; i < pages; i++) {
?? ??? ??? ??? ??? ?str += '<span class="page">' + (i + 1) + '</span>';
?? ??? ??? ??? ?}
?? ??? ??? ??? ?$("#page-box").append(str)
?? ??? ??? ?} else if (pages > 6 && (3 < currentpage <= (pages - 3))) {
?? ??? ??? ??? ?for (var i = currentpage - 2; i <= currentpage; i++) {
?? ??? ??? ??? ??? ?str += '<span class="page">' + i + '</span>';
?? ??? ??? ??? ?}
?? ??? ??? ??? ?str += '<span class="dot">...</span>';
?? ??? ??? ??? ?for (var i = pages - 3; i < pages; i++) {
?? ??? ??? ??? ??? ?str += '<span class="page">' + (i + 1) + '</span>';
?? ??? ??? ??? ?}
?? ??? ??? ??? ?$("#page-box").append(str)
?? ??? ??? ?}
?? ??? ??? ?$("#total").html("共" + page.totle + "条数据");
?? ??? ?}
?? ??? ?getpages(page);
?? ??? ?$(document).on('click', '.page', function() {
?? ??? ??? ?page.currentpage = $(this).html();
?? ??? ??? ?$(".page").removeClass("active");
?? ??? ??? ?$(this).addClass("active");
?? ??? ??? ?console.log(page.currentpage);
?? ??? ?});
?? ??? ?$(document).on('click', '#next', function() {
?? ??? ??? ?if (page.currentpage >= pages) {
?? ??? ??? ??? ?page.currentpage = pages;
?? ??? ??? ?} else {
?? ??? ??? ??? ?page.currentpage++;
?? ??? ??? ??? ?getpages(page);
?? ??? ??? ?}
?? ??? ??? ?$(".page").each(function() {
?? ??? ??? ??? ?if ($(this).html() === (page.currentpage.toString())) {
?? ??? ??? ??? ??? ?$(this).addClass("active");
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ?});
?? ??? ?$(document).on('click', '#pre', function() {
?? ??? ??? ?if (page.currentpage <= 1) {
?? ??? ??? ??? ?page.currentpage = 1;
?? ??? ??? ?} else {
?? ??? ??? ??? ?page.currentpage--;
?? ??? ??? ??? ?getpages(page);
?? ??? ??? ?}
?? ??? ??? ?$(".page").each(function() {
?? ??? ??? ??? ?if ($(this).html() === (page.currentpage.toString())) {
?? ??? ??? ??? ??? ?$(this).addClass("active");
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ?});
?? ?</script>
</html>
|