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

前端开发分页插件的修改

2018-10-23 分类：JavaScript 阅读(641) 评论(0)
前端开发读取后台数据
前端开发还是后台开发好
j2ee开发 属于前端还是后台

现在做到的：页面支持多个分页插件
待完成的：动态修改总页数等参数的时候，不需要重新构造分页
html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <style type=”text/css”>
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        form,
        fieldset,
        input,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0;
        }
        html {
            font-size: 12px;
        }
        address,
        caption,
        cite,
        code,
        dfn,
        em,
        strong,
        th,
        var {
            font-style: normal;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        q:before,
        q:after {
            content: ”;
        }
        object,
        embed {
            vertical-align: top;
        }
        hr,
        legend {
            display: none;
        }
        img,
        abbr,
        acronym,
        fieldset {
            border: 0;
        }
        ul li {
            list-style-type: none;
        }
        a,
        label {
            cursor: pointer;
        }
        img {
            vertical-align: bottom;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            outline: none;
        }
        .clearfix:after {
            content: “.”;
            visibility: hidden;
            display: block;
            height: 0.1px;
            font-size: 0.1em;
            line-height: 0;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        input,
        textarea,
        select {
            outline: none;
            border: 1px solid #bfbfbf;
        }
        th {
            font-weight: 400;
        }
        button {
            cursor: pointer;
            border: none;
            outline: none;
        }
        textarea {
            border: 1px solid #ccc;
            resize: none;
            outline: none;
            overflow: hidden;
            padding: 5px;
        }
        select {
            outline: none;
        }
        .text_overflow {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        html {
            font-family: “Microsoft YaHei”, tahoma, arial, “Hiragino Sans GB”, “\5b8b\4f53”, sans-serif;
            font-size: 14px;
            color: #5c5d5e;
        }
        /* 公共分页模块 */
        .index-page {
            float: right;
            padding-top: 10px;
        }
        .index-page .index-target {
            width: 30px;
            height: 14px;
            line-height: 14px;
            padding: 4px 6px;
            border-radius: 2px;
            vertical-align: middle;
        }
        .index-page .target {
            margin-right: 30px;
            color: #fff;
            border: 1px solid;
            width: 46px;
            height: 26px;
            display: inline-block;
            line-height: 26px;
            text-align: center;
            background: #5C9BD1;
        }
        .index-page .target:hover {
            background: #EF4836;
        }
        .index-page .page-main {
            float: right;
            margin-top: -10px;
        }
        .index-page .page-main li {
            float: left;
            width: 36px;
            height: 36px;
            border: 1px solid #e6e6e6;
            text-align: center;
            line-height: 36px;
            margin-right: 4px;
        }
        .index-page .page-main .block {
            display: block;
        }
        .index-page .page-main a {
            display: block;
            height: 100%;
            color: #c0c0c0;
        }
        .index-page .page-main a:hover,
        .index-page .page-main .active {
            background-color: #f75000;
            color: #fff;
        }
        .index-page .page-main .unable-page {
            cursor: not-allowed;
            background-color: #dedede;
        }
        .index-page .page-main .unable-page:hover {
            background-color: #dedede;
        }
        .index-page .page-main .prev,
        .index-page .page-main .next {
            display: block;
            height: 9px;
            padding: 13px 14px 15px 15px;
        }
        .index-page .page-main .prev-i,
        .index-page .page-main .next-i {
            display: block;
            width: 0;
            height: 0;
        }
        .index-page .page-main .prev-i {
            border-top: 6px solid transparent;
            border-right: 8px solid #c0c0c0;
            border-bottom: 6px solid transparent;
        }
        .index-page .page-main .next-i {
            border-top: 6px solid transparent;
            border-right: none;
            border-left: 8px solid #c0c0c0;
            border-bottom: 6px solid transparent;
        }
    </style>
</head>
<body>
    <div style=”height: 300px;width: 1000px;”>ad</div>
    <div class=”index-page” id=”pageBox”></div>
    <div style=”height: 100px;width: 1000px;”>ad</div>
    <div class=”index-page” id=”pageBox1″></div>
    <script type=”text/javascript” src=”http://static.nysochina.com/static/js/lib/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript”>
        (function ($) {
            $.fn.pageing = function (options, fn) {
                var pageNum = options.pageNum,//总页数
                    showPageNum = options.showPageNum || 6,
                    index = options.index || 1,//默认当前页为第一页
                    pageSize = options.pageSize || 10,//每页显示多少条记录
                    dataNum = options.dataNum,//总数据条数;
                    fn = fn || function () { };
                //html结构
                var html = ‘总<span class=”dataNum”></span>条数据 <span class=”now-page”></span>/<span class=”allPage”></span>页 至 <input type=”text” class=”index-target” /> 页 <a href=”###” class=”target” class=”goPage”>跳转</a>’ +
                    ‘<ul class=”page-main” id=”pageMain”>’ +
                    ‘<li class=”block”><a href=”###” class=”prev unable-page”><i class=”prev-i”></i></a></li>’ +
                    ‘</ul>’;
                // 初始化html
                $(this).html(”).append(html.replace(“pageMain”, options.ulId));
                //构造li
                var itemTemplate = ‘<li class=”page”><a href=”###” class=””>num</a></li>’;
                var liArr = [];
                for (var i = 1; i <= showPageNum && i <= pageNum; i++) {
                    var tmp = itemTemplate.replace(“num”, i);
                    liArr.push(tmp);
                }
                var last = ‘<li class=”block last”><a href=”###” class=”next”><i class=”next-i”></i></a></li>’;
                liArr.push(last);
                var $pBox = $(this),
                    $ulBox = $pBox.find(‘.page-main’),
                    $nowPage = $pBox.find(‘.now-page’),//目前多少页元素(显示)
                    $indexTarget = $pBox.find(‘.index-target’) || options.$indexTarget,//目前多少页元素（输入框）
                    $prev = $pBox.find(‘.prev’);//上一页元素
                $ulBox.append(liArr.join(“”));
                //获取页数a
                var $a = $ulBox.find(‘.page’).find(“a”);
                //下一页元素
                var $next = $pBox.find(‘.next’);
                //设置初始值
                $nowPage.text(pageNum > 0 ? 1 : 0);
                $pBox.find(‘.dataNum’).text(dataNum);
                $pBox.find(‘.allPage’).text(pageNum);
                // 上下页，页数代理点击事件
                $ulBox.on(“click”, “a”, function () {
                    var currentA = $(this);
                    if (currentA.hasClass(‘unable-page’)) {
                        return;
                    } else {
                        if (currentA.hasClass(‘prev’)) {
                            index–;
                        } else if (currentA.hasClass(‘next’)) {
                            index++;
                        } else {
                            index = parseInt(currentA.text());
                        }
                        modifyPages(index);
                        fn(index);
                    }
                });
                // 点击跳转按钮
                $pBox.find(‘.target’).click(function () {
                    var val = $.trim($indexTarget.val());
                    if (!!val && !isNaN(val)) {
                        val = parseInt(val);
                        if (val < 1) {
                            alert(‘跳转失败！输入页数不能小于1！’);
                            return false;
                        } else if (val > pageNum) {
                            alert(‘跳转失败！输入页数不能大于总页数！’);
                            return false;
                        } else {
                            index = val;
                            modifyPages(index);
                            fn(index);
                        }
                    } else {
                        alert(‘跳转失败！请输入数字’);
                    }
                });
                // 限制只能输入数字
                $indexTarget.keyup(function () {
                    var value = $(this).val();
                    $(this).val(value.replace(/\D/g, “”));
                }).keydown(function () {
                    var value = $(this).val();
                    $(this).val(value.replace(/\D/g, “”));
                });
                //控制分页样式
                cssControl(index);
                $a.eq(0).addClass(“active”);
                fn(index);
                // 样式控制
                function cssControl(index) {
                    //先去掉上次的标记
                    $prev.removeClass(‘unable-page’);
                    $next.removeClass(‘unable-page’);
                    $a.removeClass(‘active’);
                    if (index === 1 || pageNum < 1) {
                        $prev.addClass(‘unable-page’);
                    }
                    if (index === pageNum || pageNum < 1) {
                        $next.addClass(‘unable-page’);
                    }
                }
                //计算待显示的分页
                function calculateNum(index) {
                    var numArr = [];
                    var halfShow = Math.floor(showPageNum / 2);
                    var degree = index > halfShow ? halfShow : index – 1;
                    var count = showPageNum;
                    var pn = pageNum;
                    var isOver = false;//是否需要校正数据
                    while (count > 0 && pn > 0) {
                        var tempVal = index – degree;
                        numArr.push(tempVal);
                        if (tempVal > pageNum) {
                            isOver = true;
                        }
                        degree–;
                        count–;
                        pn–;
                    }
                    if (isOver) {
                        var minus = numArr[showPageNum – 1] – pageNum;
                        for (var i = 0; i < showPageNum; i++) {
                            numArr[i] -= minus;
                        }
                    }
                    return numArr;
                }
                //修改li的页数和当前页
                function modifyPages(index) {
                    cssControl(index);
                    var nums = calculateNum(index);
                    for (var i = 0; i < showPageNum && i < pageNum; i++) {
                        $a.eq(i).text(nums[i]);
                        if (index === nums[i]) {
                            $a.eq(i).addClass(‘active’);
                        }
                    }
                    $nowPage.text(index);
                }
            };
        })(jquery);
        var options = {
            index: 1,//当前页
            dataNum: 100,//总共多少数据
            pageSize: 8,//每页显示数据条数
            pageNum: 2,//一共多少页数据
            showPageNum: 6, //最多显示多少页
            ulId: “ulContainer”
        };
        $(‘#pageBox’).pageing(options, function (curp) {
            console.log(“正在请求第” + curp + “页数据”)
        });
        var options1 = {
            index: 1,//当前页
            dataNum: 80,//总共多少数据
            pageSize: 6,//每页显示数据条数
            pageNum: 10,//一共多少页数据
            showPageNum: 5, //最多显示多少页
            ulId: “ulContainer1”
        };
        $(‘#pageBox1’).pageing(options1, function (curp) {
            console.log(“正在请求第” + curp + “页数据”)
        });
    </script>
</body>
</html>
前端开发和后台开发
前端 后台 开发
web前端后台开发
赞(0)
前端开发者 » 前端开发分页插件的修改
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论