前端开发 分页组件怎么做

前端开发的专业技能|前端开发经验总结|前端如何开发微信公众号的页面

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发怎么实现分页</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            color: #000;
            text-decoration: none;
        }
        div {
            height: 3rem;
            background: red;
            margin-bottom: 1rem;
        }
        #pageBox {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 58rem;
            height: 3rem;
            margin: 0 auto;
            border: 1px solid #dedede;
            background: none;
        }
        #pageBox div {
            background: none;
        }
        .unable-page {
            color: #dedede;
            cursor: not-allowed;
        }
        .active-num-page {
            color: red;
            font-weight: 700;
        }
        #pageBox a {
            width: 4rem;
            height: 3rem;
            line-height: 3rem;
            text-align: center;
        }
        .now {
            width: 2rem;
        }
        .page-box {
            line-height: 4rem;
            width: 6rem;
        }
    </style>
</head>
<body>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”>1</div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”>333</div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”>dasd</div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div class=”page”></div>
    <div id=’pageBox’>
        <a href=”###” class=”unable-page prev”>首页</a>
        <a href=”###” class=”unable-page prev num prev-one”>上一页</a>
        <div class=”page-box”>
            <input type=”text” value=”1″ class=”now” id=”now”> /
            <span id=”pageNum”></span>
        </div>
        <a href=”###” class=”next num next-one” id=”nextPage”>下一页</a>
        <a href=”###” class=”next”>尾页</a>
    </div>
    <script type=”text/javascript” src=’http://s.thsi.cn/js/jquery-1.7.2.min.js’></script>
    <script type=”text/javascript”>
        (function ($) {
            $.fn.pageing = function (options) {
                var that = $(this);
                var div = $(‘.page’) || options.div; //分页单位元素
                var nextPage = $(‘#nextPage’) || options.nextPage; //下一个元素
                var now = $(‘#now’) || options.now; //目前多少页元素
                var pageNumNode = options.pageNumNode || $(‘#pageNum’); //一共多少页
                var prev = options.prev || $(‘.prev’); //上一页
                var next = options.next || $(‘.next’); //下一页
                var eachPage = options.eachPage || 10; //每页显示多少条记录
                var max = options.max || 10; //最多显示多少页数
                var pageNum = Math.ceil(div.length / eachPage); //总页数
                var index = 0,
                    min = 0;
                var aArray = [];
                div.hide();
                $(‘#pageNum’).text(pageNum);
                for (var i = 0; i < eachPage; i++) {
                    div.eq(i).show();
                }
                for (var i = 1; i <= pageNum; i++) {
                    var $a = $(“<a href=’###’></a>”);
                    $a.text(i);
                    i === 1 ? $a.addClass(‘active-num-page page-num’) : $a.addClass(‘page-num’);
                    pageNumNode.parent().before($a);
                }
                $(‘.page-num’).hide();
                var pageELe = $(‘.page-num’);
                showPageindex(0, max, 0);
                that.find(‘a’).live(‘click’, function () {
                    if ($(this).hasClass(‘unable-page’)) {
                        return;
                    } else if ($(this).hasClass(‘prev-one’)) {
                        index = $(‘.active-num-page’).index() – 2;
                        index–;
                    } else if ($(this).hasClass(‘next-one’)) {
                        index = $(‘.active-num-page’).index() – 2;
                        index++;
                    } else {
                        if ($(this).text() === ‘首页’) {
                            index = 0;
                        } else if ($(this).text() === ‘尾页’) {
                            index = pageNum – 1;
                        } else {
                            index = $(this).index() – 2;
                        }
                    }
                    showPageindex(min, max, index);
                    show(index, eachPage);
                });
                now.live(‘keydown’, function (event) {
                    var event = window.event || event;
                    if (event.keyCode == 13) {
                        var index = parseInt($(this).val()) – 1;
                        if (index >= pageNum || index < 0) {
                            return;
                        } else {
                            showPageindex(min, max, index);
                            show(index, eachPage);
                            $(this).blur();
                        }
                    }
                });
                function show(index, eachPage) {
                    div.hide();
                    that.children().removeClass(‘unable-page’);
                    if (index === 0) {
                        prev.addClass(‘unable-page’);
                    } else if (index === pageNum – 1) {
                        next.addClass(‘unable-page’);
                    }
                    pageELe.removeClass(‘active-num-page’);
                    pageELe.eq(index).addClass(‘active-num-page’);
                    for (var i = index * eachPage; i < (index + 1) * eachPage; i++) {
                        div.eq(i).show();
                    }
                    now.val(index + 1);
                }
                function showPageindex(min, max, index) {
                    if (index <= max / 2) {
                        min = 0;
                        max = max;
                    } else if (pageNum – index <= Math.ceil(max / 2)) {
                        min = pageNum – max;
                        max = pageNum;
                    } else {
                        min = Math.round(index – max / 2);
                        max = Math.round(index + max / 2);
                    }
                    pageELe.hide();
                    for (var i = min; i < max; i++) {
                        pageELe.eq(i).show();
                    }
                }
            };
        })(jquery);
        var options = {
            eachPage: 3,
            max: 8
        };
        $(‘#pageBox’).pageing(options);
    </script>
</body>
</html>
前端开发工具 记事本|linux上的前端开发工具|objective c前端开发工具
» 本文来自:前端开发者 » 《前端开发 分页组件怎么做》
» 本文链接地址:https://www.rokub.com/4139.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!