JS分页

(function($) {

    var pageUtil = function() {

        var sum_pages = 0;

        return {

            /**
             * 验证分页跳转页数,正整数
             * @param 跳转页数
             * @returns true/false
             */
            validatePages : function(param) {
                if (param != "" && param!= null) {
                    var reg = /^[1-9]\d*$/;
                    return reg.test(param);
                } else {
                    return false;
                }
            },
            /**
             * 验证分页跳转页数
             * @param go_pages    跳转页数
             * @returns
             */
            validateSum : function (go_pages) {
                return parseInt($('#total_pages').text()) >= go_pages;
            },
            /**
             * 计算分页,改变页码的样式
             */
            createpagesIndex : function(sum, pages, count) {

                /** 计算分几页 */
                if (sum % count == 0) {
                    sum_pages = sum / count;
                } else {
                    sum_pages = sum / count + 1;
                }
                sum_pages = Math.floor(sum_pages);

                /** 显示总页数,当前页数 */
                $('#now_pages').text(pages);
                if (sum_pages == 0) {
                    $('#total_pages').text(1);
                } else {
                    $('#total_pages').text(sum_pages);
                }

                /* 当数据只有一页时,全部禁用 */
                if (sum_pages > 1) {
                    /* 禁用首页和上一页 */
                    if (pages == 1) {
                        $("#first_pages").attr({
                            style : "color: gray;"
                        });
                        document.getElementById("first_pages").disabled = true;
                        $("#before_pages").attr({
                            style : "color: gray;"
                        });
                        document.getElementById("before_pages").disabled = true;
                    } else {
                        $("#first_pages").attr({
                            style : "color: #428bca;"
                        });
                        document.getElementById("first_pages").disabled = false;
                        $("#before_pages").attr({
                            style : "color: #428bca;"
                        });
                        document.getElementById("before_pages").disabled = false;
                    }

                    /* 禁用尾页和下一页 */
                    if (pages == sum_pages) {
                        $("#next_pages").attr({
                            style : "color: gray;"
                        });
                        document.getElementById("next_pages").disabled = true;
                        $("#last_pages").attr({
                            style : "color: gray;"
                        });
                        document.getElementById("last_pages").disabled = true;
                    } else {
                        $("#next_pages").attr({
                            style : "color: #428bca;"
                        });
                        document.getElementById("next_pages").disabled = false;
                        $("#last_pages").attr({
                            style : "color: #428bca;"
                        });
                        document.getElementById("last_pages").disabled = false;
                    }
                } else {
                    $("#first_pages").attr({
                        style : "color: gray;"
                    });
                    document.getElementById("first_pages").disabled = true;
                    $("#before_pages").attr({
                        style : "color: gray;"
                    });
                    document.getElementById("before_pages").disabled = true;
                    $("#next_pages").attr({
                        style : "color: gray;"
                    });
                    document.getElementById("next_pages").disabled = true;
                    $("#last_pages").attr({
                        style : "color: gray;"
                    });
                    document.getElementById("last_pages").disabled = true;
                }

            },

            /**
             * 跳至首页
             */
            gotoFirstPages : function(pages,event) {
                if (pages != 1) {
                    pages = 1;
                    event(pages);
                }

            },
            /**
             * 跳至上一页
             */
            gotoPrvePages : function(pages,event) {
                if (pages > 1) {
                    pages--;
                    event(pages);
                }

            },
            /**
             * 跳至下一页
             */
            gotoNextPages : function(pages,event) {
                if (pages < sum_pages) {
                    pages++;
                    event(pages);
                }
            },
            /**
             * 跳至尾页
             */
            gotoEndPages : function(pages,event) {
                if (pages != sum_pages) {
                    pages = sum_pages;
                    event(pages);
                }
            },
        }

    }();
    window.pageUtil = pageUtil;
})(jQuery);

 

<!--分页器-->
                        <div class="pagination_box">
                            <ul class="paginations">
                                <li id="first_pages">首页</li>
                                <li id="before_pages">上一页</li>
                                <li><span id="now_pages">0</span>/<span id="total_pages">0</span></li>
                                <li id="next_pages">下一页</li>
                                <li id="last_pages">尾页</li>
                            </ul>
                            <div>
                                <input type="text" id="index_pages" placeholder="输入页码"/><span id="changepages">跳转</span>
                            </div>
                        </div>

转载于:https://my.oschina.net/u/3387637/blog/1523643

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值