找回密码
当前位置：前端开发者 > jQuery > 正文

Web前端 jQuery实现分页功能

2018-07-20 分类：jQuery 阅读(1399) 评论(0)

用python开发前端的理由|python只能开发前端吗|前端开发 python

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>网页前端开发教程:jq分页</title>
    <style media=”screen”>
        .nav {
            width: 100%;
            height: 300px;
        }
        ul {
            list-style: none;
        }
        ul li {
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #E7EEEF;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            margin-left: 10px;
            border-radius: 50%;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
        /*#adlist {
list-style: none;
}
#adlist li {
float: left;
width: 50px;
height: 50px;
}*/
        .active {
            background-color: #25C8E0;
        }
    </style>
</head>
<body>
    <div class=”nav”>
    </div>
    <ul>
        <li id=”firstPage”>首页</li>
        <li id=”prePage”>上一页</li>
    </ul>
    <ul id=”adlist”>
        <li class=”active”>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul>
        <li id=”nextPage”>下一页</li>
        <li id=”lastPage”>尾页</li>
    </ul>
    <script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
    <script type=”text/javascript”>
        // 假如url没有参数
        // 最大页码
        var pageNumMax = 10;
        // 显示多少页码
        var pageShow = 5; // 默认显示5个页码
        // li显示的值在数组里面，通过操作数组来改变li的html
        var pageList = [1, 2, 3, 4, 5];
        //(function () {
        renderLi();
        firstPageDeal();
        //})();
        // 根据数组的长度渲染页码li
        function renderLi() {
            var liShow = ”;
            var firstPageNum = pageList[0];
            for (var i = firstPageNum; i <= pageList[pageShow – 1]; i++) {
                if (i == firstPageNum) {
                    liShow = ‘<li class=”active”> ‘ + i + ‘</li>’;
                } else {
                    liShow += ‘<li> ‘ + i + ‘</li>’;
                }
            }
            $(‘#adlist’).html(liShow);
        }
        // 禁用按钮功能
        function disableButton(selector) {
            $(selector).css({ ‘cursor’: ‘not-allowed’ });
        }
        function enableButton(selector) {
            $(selector).css({ ‘cursor’: ‘pointer’ });
        }
        // 获取当前页
        function getCurrentPage() {
            var currentPage = 0; //默认第一页 ，渲染li下标是从0开始
            var haveActive = false;
            $(‘#adlist li’).each(function (index) {
                if ($(this).hasClass(‘active’)) {
                    currentPage = parseInt($(this).html());
                    haveActive = true;
                    // 跳出遍历循环
                    return false;
                }
            });
            // 循环一次都没有找到active
            if (haveActive === false) {
                alert(‘获取当前页码出错’);
            }
            return currentPage;
        }
        // 获取active的下标
        function getActiveInd() {
            var activeInd = 1; // 默认1
            $(‘#adlist li’).each(function (index) {
                if ($(this).hasClass(‘active’)) {
                    activeInd = index;
                    // 跳出遍历循环
                    return false;
                }
            });
            return activeInd;
        }
        /*切换页码的active状态
        * selector 页码选择器
        * index active的下标
        */
        function switchActive(selector, index) {
            $(selector).removeClass(‘active’);
            $(selector).eq(index).attr(‘class’, ‘active’);
        }
        // 如果当前页是第一页就禁用首页和上页按钮
        function firstPageDeal() {
            if (getCurrentPage() === 1) {
                disableButton(‘#firstPage’);
                disableButton(‘#prePage’);
            }
        }
        // 如果当前页是尾页禁用下页和尾页
        function lastPageDeal() {
            if (getCurrentPage() === pageNumMax) {
                disableButton(‘#nextPage’);
                disableButton(‘#lastPage’);
            }
        }
        // 如果最大页码小于显示的最大页码，就禁用最大页码后面的页码按钮
        if (pageNumMax < pageList[pageList.length – 1]) {
            for (var i = pageNumMax; i < pageList[pageList.length – 1]; i++) {
                disableButton(‘#adlist li:eq(‘ + i + ‘)’);
            }
        }
        // 如果最后一个显示的页码等于最大页数，禁用尾页
        if (pageList[pageList.length – 1] == pageNumMax) {
            disableButton(‘#lastPage’);
        }
        // 点击对应的页码切换active
        $(‘#adlist’).on(“click”, ‘li’, function () {
            $(‘#adlist li’).removeClass(‘active’);
            $(this).addClass(‘active’);
            // 如果当前页大于第一页就启用首页和尾页
            var curpage = getCurrentPage();
            if (curpage > 1 && curpage < pageNumMax) {
                enableButton(‘#firstPage’);
                enableButton(‘#prePage’);
                enableButton(‘#nextPage’);
                enableButton(‘#lastPage’);
            } else if (curpage == 1) {
                disableButton(‘#firstPage’);
                disableButton(‘#prePage’);
                enableButton(‘#nextPage’);
                enableButton(‘#lastPage’);
            } else if (curpage == pageNumMax) {
                enableButton(‘#firstPage’);
                enableButton(‘#prePage’);
                disableButton(‘#nextPage’);
                disableButton(‘#lastPage’);
            }
            // TODO: 请求点击对应的页码的数据
        });
        // 更新页码
        function updatePageNum(arr) {
            $(‘#adlist li’).each(function (index) {
                $(this).html(arr[index]);
            });
        }
        /* 点击上一页功能
        * 分两种情况 1 active在第一个li时并且li的页码不是1，需要刷新页码数组 然后acitve一直在第一个li
        * 2 actvie不在第一个时，不用刷新数组，直接切换active
        */
        function prePage() {
            enableButton(‘#lastPage’);
            enableButton(‘#nextPage’);
            // 更新页码
            if ($(‘#adlist li’).first().hasClass(‘active’)) {
                // active一个li时更新页码
                var newpageList = [];
                pageList.map(function (val) {
                    var newVal = val – 1;
                    newpageList.push(newVal);
                })
                pageList = […newpageList];
                // 更新li中的页码
                updatePageNum(pageList);
                if (getCurrentPage() == 1) {
                    disableButton(‘#firstPage’);
                    disableButton(‘#prePage’);
                }
                return;
            }
            $(‘#adlist’).find(‘li.active’).removeClass(‘active’).prev().addClass(‘active’);
            // TODO: 请求上一页的数据
            // 到第一页禁用按钮
            if (getCurrentPage() == 1) {
                disableButton(‘#firstPage’);
                disableButton(‘#prePage’);
            }
        }
        $(‘#prePage’).click(function () {
            // 按钮禁用时不能按上一页
            if ($(this).css(‘cursor’) === ‘not-allowed’) return;
            prePage();
        });
        // 点击下一页功能
        function nextPage() {
            // 获取最后一个li的页码，判断是不是最大页码
            var lastLiVal = parseInt($(‘#adlist li’).last().html());
            var isLastPage = $(‘#adlist li’).last().hasClass(‘active’);
            enableButton(‘#firstPage’);
            enableButton(‘#prePage’);
            if (lastLiVal <= pageNumMax && isLastPage) {
                // active到最后一个li时更新页码
                var newpageList = [];
                pageList.map(function (val) {
                    var newVal = val + 1;
                    newpageList.push(newVal);
                })
                pageList = […newpageList];
                // 更新li中的页码
                updatePageNum(pageList);
                if ($(‘#adlist li’).last().html() == pageNumMax) {
                    disableButton(‘#lastPage’);
                    disableButton(‘#nextPage’);
                }
                return;
            }
            // 先高亮再判断
            $(‘#adlist’).find(‘li.active’).removeClass(‘active’).next().addClass(‘active’);
            // TODO: 请求下一页的数据
            // 到达尾页禁用按钮
            if (lastLiVal == pageNumMax && $(‘#adlist li’).last().hasClass(‘active’)) {
                disableButton(‘#nextPage’);
                disableButton(‘#lastPage’);
            }
        }
        $(‘#nextPage’).click(function () {
            if ($(this).css(‘cursor’) === ‘not-allowed’) return;
            nextPage();
        });
        // 首页
        $(‘#firstPage’).click(function () {
            // 清空页码数组
            pageList.length = 0;
            for (var i = 1; i <= pageShow; i++) {
                pageList.push(i);
            }
            updatePageNum(pageList);
            // 第一页高亮
            $(‘#adlist li’).first().addClass(‘active’).siblings().removeClass(‘active’);
            disableButton(‘#firstPage’);
            disableButton(‘#prePage’);
            enableButton(‘#lastPage’);
            enableButton(‘#nextPage’);
            // TODO: 请求首页的数据
        });
        // 尾页
        $(‘#lastPage’).click(function () {
            // 清空页码数组
            pageList.length = 0;
            for (var i = pageNumMax – pageShow + 1; i <= pageNumMax; i++) {
                pageList.push(i);
            }
            updatePageNum(pageList);
            // 最后页码高亮
            $(‘#adlist li’).last().addClass(‘active’).siblings().removeClass(‘active’);
            enableButton(‘#firstPage’);
            enableButton(‘#prePage’);
            disableButton(‘#nextPage’);
            disableButton(‘#lastPage’);
            // TODO: 请求尾页的数据
        });
    </script>
</body>
</html>

文科生自学前端开发|前端是网页开发|web前端开发编辑器排行

赞(0)
前端开发者 » Web前端 jQuery实现分页功能
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论