分页兼容ie8 jquery

兼容ie8分页

js代码如下 page.js：

;(function ($, window, document, undefined) {
    'use strict';
    function Paging(element, options) {
        this.element = element;
        this.options = {
            pageNum: options.pageNum || 1, // 当前页码
            totalNum: options.totalNum, // 总页码
            totalList: options.totalList, // 数据总记录
            callback: options.callback // 回调函数
        };
        this.init();
    }
    Paging.prototype = {
        constructor: Paging,
        init: function () {
            this.createHtml();
            this.bindEvent();
        },
        createHtml: function () {
            var me = this;
            var content = [];
            var pageNum = me.options.pageNum;
            var totalNum = me.options.totalNum;
            var totalList = me.options.totalList;
            content.push("<button type='button' id='firstPage'><<</button><button type='button' id='prePage'>上一页</button>");
            // 总页数大于6必显示省略号
            if (totalNum >5) {
                // 1、当前页码小于5且总页码大于6 省略号显示后面+总页码
                if (pageNum < 4) {
                    // 1与6主要看要显示多少个按钮 目前都显示5个
                    for (var i = 1; i <5; i++) {
                        if (pageNum !== i) {
                            content.push("<button type='button'>" + i + "</button>");
                        } else {
                            content.push("<button type='button' class='current'>" + i + "</button>");
                        }
                    }
                    content.push("<button type='button'>...</button>");
                    content.push("<button type='button'>" + totalNum + "</button>");
                } else {
                    // 2、当前页码接近后面 到最后页码隔3个 省略号显示后面+总页面
                    if (pageNum < totalNum - 2) {
                        for (var i = pageNum - 1; i < pageNum +2; i++) {
                            if (pageNum !== i) {
                                content.push("<button type='button'>" + i + "</button>");
                            } else {
                                content.push("<button type='button' class='current'>" + i + "</button>");
                            }
                        }
                        content.push("<button type='button'>...</button>");
                        content.push("<button type='button'>" + totalNum + "</button>");
                    } else {
                        // 3、页码至少在5，最多在【totalNum - 3】的中间位置 第一页+省略号显示前面
                        content.push("<button type='button'>" + 1 + "</button>");
                        content.push("<button type='button'>...</button>");
                        for (var i = totalNum - 3; i < totalNum + 1; i++) {
                            if (pageNum !== i) {
                                content.push("<button type='button'>" + i + "</button>");
                            } else {
                                content.push("<button type='button' class='current'>" + i + "</button>");
                            }
                        }
                    }
                }
            } else {
                // 总页数小于6
                for (var i = 1; i < totalNum + 1; i++) {
                    if (pageNum !== i) {
                        content.push("<button type='button'>" + i + "</button>");
                    } else {
                        content.push("<button type='button' class='current'>" + i + "</button>");
                    }
                }
            }
            content.push("<button type='button' id='nextPage'>下一页</button><button type='button' id='lastPage' >>></button>");
            me.element.html(content.join(''));

            // DOM重新生成后每次调用是否禁用button
            setTimeout(function () {
                me.dis();
            }, 20);
        },
        bindEvent: function () {
            var me = this;
            me.element.off('click', 'button');
            // 委托新生成的dom监听事件
            me.element.on('click', 'button', function () {
                var id = $(this).attr('id');
                var num = parseInt($(this).html());
                var pageNum = me.options.pageNum;
                if (id === 'prePage') {
                    if (pageNum !== 1) {
                        me.options.pageNum -= 1;
                    }
                } else if (id === 'nextPage') {
                    if (pageNum !== me.options.totalNum) {
                        me.options.pageNum += 1;
                    }
                } else if (id === 'firstPage') {
                    if (pageNum !== 1) {
                        me.options.pageNum = 1;
                    }
                } else if (id === 'lastPage') {
                    if (pageNum !== me.options.totalNum) {
                        me.options.pageNum = me.options.totalNum;
                    }
                }
                //下拉框 
                 else if (id === 'lastPage') {
                    if (pageNum !== me.options.totalNum) {
                        me.options.pageNum = me.options.totalNum;
                    }
                }else {
                    me.options.pageNum = num;
                }
                me.createHtml();
                if (me.options.callback) {
                    me.options.callback(me.options.pageNum);
                }
            });
        },
        dis: function () {
            var me = this;
            var pageNum = me.options.pageNum;
            var totalNum = me.options.totalNum;
            if (pageNum === 1) {
                me.element.children('#firstPage, #prePage').prop('disabled', true);
                    //如果总页数等于1，下一页为禁止状态
                if(totalNum==1){
                    me.element.children('#lastPage, #nextPage').prop('disabled', true);
                }
            } else if (pageNum === totalNum) {
                me.element.children('#lastPage, #nextPage').prop('disabled', true);
            }
        }
    };
    $.fn.paging = function (options) {
        return new Paging($(this), options);
    }
})(jQuery, window, document);

在页面引入

   <!-- 分页板块 -->
                <div class="pageNation">
                    <div class="totalNum">
                        <div>
                            <span class='totalList'> 总记录数<span class="red" id='totalList'></span>条</span>
                            <select name="" id="pageSelect">
                                <option value="A" selected="selected">10</option>
                                <option value="B">20</option>
                                <option value="C">30</option>
                                <option value="D">40</option>
                            </select><span class="num">条/页</span>
                        </div>
                        <div id="page" class="page_div"></div>
                        <!--跳转...页  -->
                        <div class="page">
                            <span>跳转</span><input type="number" value="1" id='current'><span>页</span> <button
                                id='confirm'>确定</button>
                        </div>
                    </div>
                </div>
  
  <script type="text/javascript" src="/lib/pageNation/js/page.js"></script>
  <script type="text/javascript">
             $("#page").paging({
                    pageNum: 1, // 当前页面
                    totalNum: 12, // 总页码
                    totalList: 300, // 记录总数量
                    callback: function (num) { //回调函数 返回当前页
                        //排除NaN
                        if (num) {
                         console.log(num)
                        }
                    }
                });
    </script>
  
  

css代码，自己可以调整

/* 分页 */
.pageNation .red {
    color: #ff0000;
}

.pageNation .num {
    color: #323232;
    font-size: 14px;
}

.pageNation .totalNum {
    margin-top: 24px;
}

.pageNation .totalNum>div {
    display: inline-block;
}

.pageNation .totalList {
    padding-left: 24px;
    color: #323232;
    font-size: 14px;
}

.totalNum .page {
    margin-left: 20px;
    font-size: 12px;
}

.totalNum .page input {
    width: 40px;
    height: 34px;
    padding: 0 10px;
    border: none;
    outline: none;
    border: 1px solid #dddddd;
}

.totalNum .page button {
    color: #327ab7;
    background-color: #ffffff;
    width: 46px;
    height: 32px;
    border: none;
    outline: none;
    border: 1px solid #dddddd;
}

.totalNum .page span {
    padding: 0 4px;
}

.pageNation select {
    margin-left: 34px;
    width: 68px;
    height: 28px;
    text-align: center;
    border: none;
    outline: none;
    color: #333333;
    border: 1px solid #c4c6c6;
}

.page_div {
    color: #327ab7;
    margin-left: 20px;
}

/* 页数按钮样式 */
.page_div button {
    display: inline-block;
    min-width: 26px;
    height: 28px;
    cursor: pointer;
    color: #327ab7;
    font-size: 12px;
    line-height: 28px;
    background-color: #f9f9f9;
    border: 1px solid #dddddd;
    border-left: none;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#firstPage,
#lastPage,
#nextPage,
#prePage {
    width: 24px;
    color: #327ab7;
    border: 1px solid #dddddd
}

#nextPage,
#prePage {
    width: 52px
}

#nextPage {
    border-left: none;
}

#firstPage {
    border-right: none;
    margin-left: 90px;
}

#lastPage {
    border-left: none;
}

.page_div .current {
    background-color: #327ab7;
    border-color: #327ab7;
    color: #FFF
}

/* 页面数量 */
.totalPages {
    margin: 0 10px
}

.totalPages span,
.totalSize span {
    color: #327ab7;
    margin: 0 5px
}

/*button禁用*/
.page_div button:disabled {
    opacity: .5;
    cursor: no-drop
}