分页插件--记录

Posted 2021-01-08 zhoushangwu

结构

paging |-----paging.css

          |-----paging.js

 

paging.css内容

.zsw-paging {
    display: inline-block;
}

.zsw-paging ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline;
}

.zsw-paging-first,
.zsw-paging-prev,
.zsw-paging-next,
.zsw-paging-last,
.zsw-paging-page li {
    display: inline-block;
    border: 1px solid #bbb;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
}

.zsw-paging-first,
.zsw-paging-prev,
.zsw-paging-next,
.zsw-paging-last,
.zsw-paging-page li {
    display: inline-block;
    border: 1px solid #bbb;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: #666;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
    background-color: #fff;

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
        Introduced in IE 10.
        See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

.zsw-paging span:hover,
.zsw-paging input:hover,
.zsw-paging-page li:hover,
.zsw-active {
    background-color: #5cb85c !important;
    border: #5cb85c 1px solid !important;
    color: #fff !important;
}

　　paging.js内容

function zswPage(opt) {
    this.LoadCss(‘paging.css‘);

    this.defaultOption = {
        pageSize: 10,
        elem: ".zsw-page",
        dataTotalCount: 0,
        pageTotalCount: 0,
        labelNumber: 5,
        firstName: "first",
        lastName: "last",
        firstLastShow: true,
        prevName: "prev",
        nextName: "next",
        prevNextShow: true,
        repeatClick: true
    }

    this.currentOption = $.extend({}, this.defaultOption, opt);

    this.pageIndex = 0;
    this.LabelClickAfter;

    //页码点击事件绑定
    this.LabelClick();
    //绑定事件
    this.FirstClick();
    this.LastClick();
    this.PrevClick();
    this.NextClick();
}
zswPage.prototype = {
    PageInit: function () {
        //如果页码在创建对象时就赋值，那么久调用初始化方法
        this.CreatePageHtml();
    },
    LoadCss: function (cssPath) {
        var path = this.getPath(‘paging.js‘);
        path = path + cssPath;
        var head = document.getElementsByTagName(‘head‘)[0];
        var link = document.createElement(‘link‘);
        link.type = ‘text/css‘;
        link.rel = ‘stylesheet‘;
        link.href = path;
        head.appendChild(link);
    },
    LastPositionIndex: function () {
        return $(".zsw-paging-page li").eq(this.currentOption.labelNumber - 1).html() - 1;
    },
    FirstPositionIndex: function () {
        return $(".zsw-paging-page li").eq(0).html() - 1
    },
    CalcTotalPage: function () {
        var pageTotalCount = 0;
        if (this.currentOption.dataTotalCount == 0) {
            pageTotalCount = this.currentOption.pageTotalCount;
        } else {
            pageTotalCount = parseInt(this.currentOption.dataTotalCount / this.currentOption.pageSize) + (this.currentOption.dataTotalCount % this.currentOption.pageSize > 0 ? 1 : 0);
        }

        return pageTotalCount
    },
    CreatePageHtml: function () {
        var pageTotalCount = this.CalcTotalPage();
        var labelNumber = this.currentOption.labelNumber;

        if (pageTotalCount == 0) {
            $(this.currentOption.elem).html("");
            return false;
        }

        var html = "";
        html += ‘<div class="zsw-paging">‘;
        if (this.currentOption.firstLastShow) {
            html += ‘<span class="zsw-paging-first">‘ + this.currentOption.firstName + ‘</span>
‘;
            //html += ‘<input type="button" class="zsw-paging-first" value="‘+this.currentOption.firstName+‘" />
‘;
        }
        if (this.currentOption.prevNextShow) {
            html += ‘<span class="zsw-paging-prev">‘ + this.currentOption.prevName + ‘</span>
‘;
        }
        html += ‘<ul class="zsw-paging-page">
‘;

        var lastIndex = this.LastPositionIndex();
        var firstIndex = this.FirstPositionIndex();

        if (this.pageIndex < (this.currentOption.labelNumber - 1)) {
            for (var i = 0; i < pageTotalCount; i++) {
                if (i < labelNumber) {
                    if (i == this.pageIndex) {
                        html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li>
‘
                    } else {
                        html += ‘<li>‘ + (i + 1) + ‘</li>
‘
                    }
                } else {
                    break;
                }
            }
        }
        else if (this.pageIndex >= pageTotalCount - (this.currentOption.labelNumber) + 1) {
            for (var i = pageTotalCount - this.currentOption.labelNumber; i < pageTotalCount; i++) {
                if (i < pageTotalCount) {
                    if (i == this.pageIndex) {
                        html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li>
‘
                    } else {
                        html += ‘<li>‘ + (i + 1) + ‘</li>
‘
                    }
                } else {
                    break;
                }
            }
        }
        else {
            if (this.pageIndex == firstIndex) {
                for (var i = this.pageIndex - this.currentOption.labelNumber + 2; i < this.pageIndex + 2; i++) {
                    if (i == this.pageIndex) {
                        html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li>
‘
                    } else {
                        html += ‘<li>‘ + (i + 1) + ‘</li>
‘
                    }
                }
            } else if (this.pageIndex == lastIndex) {
                for (var i = this.pageIndex - 1; i < this.pageIndex - 1 + this.currentOption.labelNumber; i++) {
                    if (i == this.pageIndex) {
                        html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li>
‘
                    } else {
                        html += ‘<li>‘ + (i + 1) + ‘</li>
‘
                    }
                }
            } else {

                for (var i = this.pageIndex - parseInt(this.currentOption.labelNumber / 2); i < pageTotalCount; i++) {
                    if (i < parseInt(this.pageIndex) + parseInt(labelNumber) - (this.currentOption.labelNumber / 2)) {
                        if (i == this.pageIndex) {
                            html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li>
‘
                        } else {
                            html += ‘<li>‘ + (i + 1) + ‘</li>
‘
                        }
                    } else {
                        break;
                    }
                }
            }

        }


        html += ‘</ul>
‘;
        if (this.currentOption.prevNextShow) {
            html += ‘<span class="zsw-paging-next">‘ + this.currentOption.nextName + ‘</span>
‘;
        }
        if (this.currentOption.firstLastShow) {
            html += ‘<span class="zsw-paging-last">‘ + this.currentOption.lastName + ‘</span>
‘;
        }
        html += ‘</div>‘;

        $(this.currentOption.elem).html(html);
    },
    LabelClick: function () {
        var that = this;
        $(this.currentOption.elem).on("click", "li", function () {
            if (!that.currentOption.repeatClick) {

                var lastIndex = that.LastPositionIndex();
                var firstIndex = that.FirstPositionIndex();

                //阻止重复点击
                if (that.pageIndex == parseInt($(this).html()) - 1 && that.pageIndex != lastIndex && that.pageIndex != firstIndex) {
                    return false;
                }
            }

            that.pageIndex = parseInt($(this).html()) - 1;

            var lastli = $(".zsw-paging-page li").eq(that.currentOption.labelNumber - 1).html();
            var firstli = $(".zsw-paging-page li").eq(0).html();

            if (that.pageIndex == (lastli - 1) || that.pageIndex == (firstli - 1)) {
                that.CreatePageHtml();
            } else {
                $(".zsw-paging-page li").removeClass("zsw-active")
                $(this).addClass("zsw-active")
            }

            if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") {
                that.LabelClickAfter(that.pageIndex);
            }
        })
    },
    FirstClick: function () {
        var that = this;
        $(this.currentOption.elem).on("click", ".zsw-paging-first", function () {
            if (!that.currentOption.repeatClick) {
                //阻止重复点击
                if (that.pageIndex == 0) {
                    return false;
                }
            }
            that.pageIndex = 0;
            that.CreatePageHtml();

            if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") {
                that.LabelClickAfter(that.pageIndex);
            }
        })
    },
    LastClick: function () {
        var that = this;
        $(this.currentOption.elem).on("click", ".zsw-paging-last", function () {
            if (!that.currentOption.repeatClick) {
                //阻止重复点击
                if (that.pageIndex == that.CalcTotalPage() - 1) {
                    return false;
                }
            }

            that.pageIndex = that.CalcTotalPage() - 1;

            that.CreatePageHtml();

            if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") {
                that.LabelClickAfter(that.pageIndex);
            }
        })
    },
    PrevClick: function () {
        var that = this;
        $(this.currentOption.elem).on("click", ".zsw-paging-prev", function () {
            that.pageIndex = that.pageIndex - 1;
            if (!that.currentOption.repeatClick) {
                //阻止重复点击
                if (that.pageIndex < 0) {
                    that.pageIndex = 0;
                    return false;
                }
            }

            var firstIndex = that.FirstPositionIndex();

            if (that.pageIndex == (firstIndex) || that.pageIndex == (firstIndex - 1)) {
                if ((that.pageIndex) != firstIndex && (that.pageIndex) != firstIndex - 1) {
                    return false;
                }

                that.CreatePageHtml();
            } else {
                $(".zsw-paging-page li").removeClass("zsw-active")

                var lilist = $(".zsw-paging-page li");

                $.each(lilist, function (i, item) {
                    if (that.pageIndex == ($(item).html() - 1)) {
                        $(this).addClass("zsw-active")
                    }
                })
            }

            if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") {
                that.LabelClickAfter(that.pageIndex);
            }
        })
    },
    NextClick: function () {
        var that = this;
        $(this.currentOption.elem).on("click", ".zsw-paging-next", function () {
            that.pageIndex = that.pageIndex + 1;
            var totalPage = that.CalcTotalPage();
            if (!that.currentOption.repeatClick) {
                //阻止重复点击
                if (that.pageIndex >= totalPage) {
                    that.pageIndex = totalPage - 1;
                    return false;
                }
            }

            var lastIndex = that.LastPositionIndex();

            if (that.pageIndex == (lastIndex) || that.pageIndex == (lastIndex + 1)) {
                if ((that.pageIndex) != lastIndex && (that.pageIndex) != lastIndex + 1) {
                    return false;
                }

                that.CreatePageHtml();
            } else {
                $(".zsw-paging-page li").removeClass("zsw-active")

                var lilist = $(".zsw-paging-page li");

                $.each(lilist, function (i, item) {
                    if (that.pageIndex == ($(item).html() - 1)) {
                        $(this).addClass("zsw-active")
                    }
                })
            }
            //that.CreatePageHtml();

            if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") {
                that.LabelClickAfter(that.pageIndex);
            }
        })
    },
    GetPageIndex: function () {
        return this.pageIndex;
    },
    //设置总页码
    SetPageTotalCount: function (totalPage) {
        //总页数相同时，不重新计算
        if (this.currentOption.pageTotalCount == totalPage) {
            return false;
        }

        this.currentOption.pageTotalCount = totalPage;

        if (this.pageIndex >= totalPage) {
            this.pageIndex = totalPage - 1;
        }

        this.CreatePageHtml();
    },
    //设置数据总数
    SetDataTotalCount: function (dataTotal) {
        //总页数相同时，不重新计算
        if (this.currentOption.dataTotalCount == dataTotal) {
            return false;
        }

        //var oldPageTotal = this.CalcTotalPage();

        this.currentOption.dataTotalCount = dataTotal;

        var pageTotal = this.CalcTotalPage();

        if (this.pageIndex >= pageTotal) {
            this.pageIndex = pageTotal - 1;
        }

        this.CreatePageHtml();
    },
    //刷新数据
    refreshData: function (a, b) {
        var pageIndex = 0;
        var type = "";
        
        if(arguments.length == 1){
            type = arguments[0];
        }
        
        if(arguments.length == 2){
            pageIndex = arguments[0]
            type = arguments[1];
        }
        
        //刷新数据
        if (type == this.optionType[0]) {
            if (pageIndex == 0) {
                this.pageIndex = 0;
            }
        }

        if(type == this.optionType[1]){
            this.currentOption.dataTotalCount = this.currentOption.dataTotalCount - 1;

            var totalPage = this.CalcTotalPage();

            if(this.pageIndex == totalPage){
                this.pageIndex = totalPage - 1;
            }
        }

        if(type == this.optionType[2]){
            this.currentOption.dataTotalCount = this.currentOption.dataTotalCount + 1;
        }

        this.CreatePageHtml();

        if (this.LabelClickAfter && typeof (this.LabelClickAfter) === "function") {
            this.LabelClickAfter(this.pageIndex);
        }
    },
    optionType: [
        "refresh",
        "delete",
        "insert",
    ],
    getPath: function (jsName) {
        var js = document.scripts;//页面js引用
        var path = ‘‘;

        $.each(js, function (i, item) {
            var src = item.src;
            src = src.substring(src.lastIndexOf("/") + 1, src.length);
            //jsArray.push(src);

            if (src == jsName) {
                path = item.src.substring(0, item.src.lastIndexOf("/") + 1);
                return false;
            }
        })

        return path;
    }
}

　　demo.html内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="zsw-page"></div>
    <div>
        <input id="totalPage" type="text" />
        <input type="button" id="ok" value="确定" />
    </div>
    <div>
        <input type="button" id="add" value="增加" />
        <input type="button" id="refresh" value="刷新" />
        <input type="button" id="del" value="删除" />
    </div>
</body>

</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="paging/paging.js"></script>
<script src="paging/demo.js"></script>

　　demo.js内容

var page = new zswPage({
    dataTotalCount:128,//数据总量
    pageSize:10,//每页数量
    labelNumber: 8,//显示的按钮数  默认 5
    firstName: "首页", //默认first  可以写html标签，并自定义样式，如需自己写功能，阻止冒泡即可
    lastName: "末页",  //默认last  可以写html标签，并自定义样式，如需自己写功能，阻止冒泡即可
    prevName: "上一页", //默认prev  可以写html标签，并自定义样式，如需自己写功能，阻止冒泡即可
    nextName: "下一页", //默认next  可以写html标签，并自定义样式，如需自己写功能，阻止冒泡即可
    repeatClick: false,//同一个按钮重复点击是否被允许  默认true
    firstLastShow: true,//首页与末页是否显示  默认true
    prevNextShow: true//上一页与下一页是否显示 默认trye
})

//ajax获取页码后设置，使用下面的方法
//设置点击的回调函数
page.LabelClickAfter = function (pageIndex) {
    //调用并传递页码
    TestClick();
    //pageIndex当前页码，从0开始
    //alert(pageIndex);
}

//ajax调用的方法
function TestClick() {
    // $.ajax({
    //     success: function () {
    //         page.SetPageTotalCount(8);//设置
    //     }
    // })
    
    //page.SetDataTotalCount(187);

    //alert()
}

//首次执行
TestClick();

//设置总数量应该放在ajax中，在总数量改变的时候重新生成，主要是最后一页的问题
page.SetDataTotalCount(187);

var type = [
    "refresh",
    "delete",
    "insert",
]

$("#add").click(function(){
    //新增时调用
    page.refreshData(type[2])
})

$("#refresh").click(function(){
    //刷新，并切换到第一页
    //page.refreshData(0,type[0])
    //刷新，不切换页面
    page.refreshData(0,type[0])
})

$("#del").click(function(){
    //删除时调用
    page.refreshData(type[1])
})