编程业务案例——Js+Jquery+手撕翻页插件——源码+解析

效果

css样式

.Pages {
    zoom: 1;
    text-align: center;
    color: #666;
    clear: both;
}

.Pages span {
    padding: 0px 0px;
    display: inline-block;
}

.Pages a {
    display: inline-block;
    margin: 0px 4px;
    line-height: 36px;
    text-align: center;
}

.Pages .p_page a {
    display: inline-block;
    vertical-align: middle;
}

.Pages .p_page .a_prev,
.Pages .p_page .a_next,
.Pages .p_page .a_first,
.Pages .p_page .a_end {
    display: inline-block;
    vertical-align: middle;
    color: #666;
    font-size: 14px;
}

.Pages .p_page .num a {
    display: inline-block;
    width: 40px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    color: #666;
    border: 1px solid #e6e6e6;
}

.Pages a.a_prev,
.Pages a.a_next,
.Pages .p_page .a_first,
.Pages .p_page .a_end {
    padding: 0 10px;
    height: 36px;
    border: 1px solid #e6e6e6;
}

.Pages .p_page .num a:hover,
.Pages .p_page .num a.a_cur {
    background: #a50000;
    color: #fff;
    border: 1px solid #a50000;
}

.Pages a.a_prev:hover,
.Pages a.a_next:hover,
.Pages .p_page .a_first:hover,
.Pages .p_page .a_end:hover {
    background: #a50000;
    color: #fff;
    border: 1px solid #a50000;
}

.Pages .sum {
    display: inline-block;
    margin-left: 4px;
    width: 80px;
    height: 36px;
    border: 1px solid #e6e6e6;
    vertical-align: top;
}

.Pages .sum span {
    font-size: 14px;
    color: #666;
    line-height: 36px;
    text-align: center;
}

.Pages .sum span b {
    font-weight: normal;
}

html代码

<div class="Pages">
    <span class="p_page">
          <a onclick="loadData(1)" class="a_first" style="cursor: pointer;">首页</a>
          <a onclick="countReduce()" class="a_prev" style="cursor: pointer;">上一页</a>
          <em class="num"></em>
          <a onclick="countAdd()" class="a_next" style="cursor: pointer;">下一页</a>
          <a onclick="countLast()" class="a_end" style="cursor: pointer;">末页</a>
          <div class="sum">
             <span class="p_cur" id="sum">共<b>62</b>页 </span>
          </div>
    </span>
 </div>

js代码

 //定义全局变量控制当前页码
 var count = 1;
 //定义全局变量控制总页数
 var totalPage = 1;

    $(document).ready(function () {
        loadData(1);
    });
    //加载数据，这个函数作用：1、页面初始化渲染，2、点击分页时调用。现在你可以理解为页面初始化用的。
    // currentId 当前第几页
    function loadData(currentId) {
        count = currentId;
        $.ajax({
            type: 'get',
            url: '${ctx.contextPath}/pc/demand/dataList',
            dataType: 'json',
            data: {
                'currentId': currentId
            },
            success: function (data) {
                totalPage = data.page;
                demand(data, currentId);
                $("#sum").empty();
                var sumStr = "共<b>" + totalPage + "</b>页";
                $("#sum").append(sumStr);
                pageList(totalPage);
            },
            error: function (data) {
                alert(data);
            }
        });
    }

    function demand(data, currentId) {
        if (data.rows.length == 0) {
            $("#demandUl").empty();
            $("#demandUl").append(" ");
        } else {
            var demandStr = "";    //demandStr变量存储要展示的内容，下面循环不在赘述。
            var length = data.rows.length > 10 ? 10 : data.rows.length;
            for (var i = 0; i < length; i++) {
                demandStr += "<li>\n" +
                    "<span><a class=\"playbtn\">播放</a></span>\n" +
                    "<a href=\"\"><i>▪</i>\n" + data.rows[i].name
                    + "</a>\n" +
                    "</li>";
            }
            $("#demandUl").empty();
            $("#demandUl").append(demandStr);    //请在你所要添加数据的容器中加一个id来将demandStr遍历所得的样式存放进去。
        }
    }
    
    //pageList：滚动显示页数，逻辑判断
    function pageList(totalPage) {
        //总页数小于5
        if (totalPage <= 5) {
            var length = totalPage <= 5 ? totalPage : 5;
            flushPage(1, length);
            //总页数大于5
        } else if (totalPage > 5) {
        //count是选择的当前页
            if (count < 3) {
                flushPage(1, 5);
            } else if (count >= 3) {
                i = count - 2;
                var length3 = i + 4;
                if (length3 < totalPage) {
                    flushPage(i, length3);
                } else {
                    flushPage(totalPage - 4, totalPage);
                }
            }
        }
    }

     //刷新页码
     // i是起始页,length是显示页码长度，比如1,2,3,4,5；点击4时显示2,3,4,5,6（总页数得是6及以上，不能越界）
    function flushPage(i, length) {
        var pageListStr = "";
        for (i; i <= length; i++) {
            if (count == i) {
                pageListStr += "<a οnclick=\"loadData(this.text)\" class=\"a_num\" id=\"pageNum2\" style=\"cursor: pointer;background:#a50000;color: white;\"  >" + i + "</a>";
            } else {
                pageListStr += "<a οnclick=\"loadData(this.text)\" class=\"a_num\" id=\"pageNum2\" style=\"cursor: pointer;\" >" + i + "</a>";
            }
        }
        $(".num").empty();
        $(".num").append(pageListStr);
    }
    
    //下一页
    function countAdd() {
        if ((count + 1) <= totalPage) {
            count++;
        } else {
            count = 1;
        }
        loadData(count);
    }

    //上一页
    function countReduce() {
        if ((count - 1) >= 1) {
            count--;
        } else {
            count = totalPage;
        }
        loadData(count);
    }

    //末页
    function countLast() {
        count = totalPage;
        loadData(count);
    }