基于jquery自定义分页插件(含测试使用)

paginationyl.js
/**
 * 分页插件
 * Created by Yvonne on 2018/3/27.\
 * $("#pageDefined").paginationyl({
 *          total:data.total,
 *          pageSize:15,
 *          btnSize:6,
 *          selectPageSize:[15,30,50],
 *          init:function(cur,psize,total){
 *              var start = (cur-1)*psize;
 *              var tableData = data.data;
 *              for(var i = start; i<(start+psize);i++){
 *                  createTr(tbody,headers,tableData[i]);
 *              }
 *            },
 *           callBack:function(cur,psize,total){
 *                 tbody.empty();
 *                 var tableData = data.data;
 *                 var start = (cur-1)*psize;
 *                 var tableData = data.data;
 *                for(var i = start; i<(start+psize);i++){
 *                    createTr(tbody,headers,tableData[i]);
 *                }
 *            }
 *        })
 * 或者
 * new paginationyl($("#pageDefined"),{});
 *
 */
(function (global, factory) {
    if (typeof define === 'function' && (define.amd || define.cmd)) {
        define(factory);
    } else {
        global.paginationyl = factory();
    }
}(this, function () {
    /**
     * 分页组件
     * 支持jQuery包装器调用以及new实例构造
     * eg $().paginationyl(options);
     new paginationyl($(), options);
     **/
    $.fn.paginationyl = function(options) {
        return $(this).each(function() {
            if (!$(this).data('pagination')) {
                $(this).data('pagination', new paginationyl($(this), options));
            }
        });
    };

    var paginationyl = function(container, options) {
        var _this = this;
        _this.$el = $(container);
        var defaultParams={
            btnSize:5,
            total:0,
            currentPage:1,
            pageSize:30,
            init:$.noop,
            selectPageSize:[10,30,50],
            callBack: $.noop
        }
        $.extend(defaultParams,options||{});
        _this.callBack =  defaultParams.callBack;
        _this.total = defaultParams.total||0;//总数
        _this.selectPageSize = defaultParams.selectPageSize||[];//每页显示的条数
        _this.btnSize = defaultParams.btnSize || 5;//翻页按钮
        _this.currentPage = defaultParams.currentPage || 1;//当前页数
        _this.pageSize = defaultParams.pageSize || 1;//每页显示的数
        _this.btnSize =  _this.btnSize<5?5:(_this.btnSize%2 != 0?_this.btnSize:_this.btnSize+1);//只能奇数
        _this.totalPage =_this.total%_this.pageSize>0?Math.ceil(_this.total/_this.pageSize):parseInt(_this.total/_this.pageSize);
        //初始化建
        _this.$el.append(_this.cretateLeftDiv()).append(_this.cretateRightDiv()).append('<div style="clear: both"></div>');
        _this.init_page_btn(_this.currentPage);
        defaultParams.init(_this.currentPage,_this.pageSize,_this.total);
        return _this;
    }


    paginationyl.prototype.createLi = function (isActive,type){
        var alUl = this.$el.find(".page-ul");
        var li = null;
        if("prev"==type){
            li= $('<li class="prev"><a href="javascript:void(0)"  class="glyphicon glyphicon-chevron-left"></a></li>');
        }else if("next"==type){
            li=$('<li class="next"><a href="javascript:void(0)"  class="glyphicon glyphicon-chevron-right"></a></li>');
        }else if("..."== type){
            li=$('<li>...</li>');
        }else{
            li=$('<li '+(!isActive?'':'class="active"')+'><a href="javascript:void(0)" >'+type+'</a></li>');
        }
        alUl.append(li);
        return li;
    }
    /**
     * 数据信息
     * @returns {*|jQuery|HTMLElement}
     */
    paginationyl.prototype.cretateLeftDiv =  function(){
        var leftDiv = $('<div class="left-detail">');
        //οnblur="input_select_page(this.value)"
        var html = '共 <span class="total-count">'+this.total+'</span>条,<input type="text" class="current-page"  value="'+this.currentPage+'" />/<span class="total-page">'+
            this.totalPage+'</span>页,每页'+this.createSelect()+'条';
        leftDiv.html(html);
        return leftDiv;
    }
    /**
     *右边页数按钮
     * @returns {*|jQuery|HTMLElement}
     */
    paginationyl.prototype.cretateRightDiv =   function (){
        var rightDiv = $('<div class="right-btn"><ul class="page-ul"></ul></div>');
        return rightDiv;
    }

    /**
     * 拼接select 的每页显示条数
     * @returns {string}
     */
    paginationyl.prototype.createSelect = function (){
        var _this= this;
      var html = '<select name="page-size"  >';
        $.each(_this.selectPageSize,function(index,v){
            html = html+'<option  '+(_this.pageSize== v?"selected":"")+' value="'+v+'">'+v+'</option>';
        });
        html = html+'</select>'
        return html;
    }
    paginationyl.prototype.init_page_btn =  function (current){
       var _this = this;
        var alUl = _this.$el.find(".page-ul");
        var total_page = _this.totalPage;
        _this.$el.find(".current-page").val(current);
        _this.currentPage = current;
        alUl.empty();
        if (total_page <= _this.btnSize) {
            _this.createLi(false,"prev");
            for (var start = 1; start <= total_page; start++) {
                _this.createLi(current==start,start);
            }
            _this.createLi(false,"next");
        }else if (current < total_page * 0.5 && current < _this.btnSize - 1) {
            _this.createLi(false,"prev");
            if (current < _this.btnSize - 1) {
                for (start = 1; start < _this.btnSize; start++) {
                    _this.createLi(current==start,start);
                }
            }
            _this.createLi(false,"...");
            _this.createLi(false,total_page);
            _this.createLi(false,"next");
        } else if (current > total_page * 0.5 && current > total_page - _this.btnSize + 2) {
            _this.createLi(false,"prev");
            _this.createLi(false,"1");
            _this.createLi(false,"...");
            for (start = total_page - _this.btnSize + 2; start <= total_page; start++) {
                _this. createLi(current==start,start);
            }
            _this.createLi(false,"next");
        } else {
            _this.createLi(false,"prev");
            _this.createLi(false,"1");
            _this.createLi(false,"...");
            var size = _this.btnSize-2;
            for (start = size/2;start>1;start--){
                _this.createLi(false,parseInt(current)-parseInt(start));
            }
            for (start = 0;start<size/2;start++){
                _this.createLi(start==0,parseInt(current)+parseInt(start));
            }
            _this.createLi(false,"...");
            _this.createLi(false,total_page);
            _this.createLi(false,"next");
        }
        _this.addListen();
    }

    paginationyl.prototype.addListen =  function(){
        var control = this;
        control.$el.find(".current-page").off("focus");
        control.$el.find(".current-page").off("blur");
        control.$el.find("[name='page-size']").off('change');
        var alUl = control.$el.find(".page-ul");
        var alLi = alUl.children("li:not(.prev,.next)");
        function isIntNum(val){
            var regPos = /^\d+$/; // 非负整数
            var regNeg = /^\-[1-9][0-9]*$/; // 负整数
            if(regPos.test(val) || regNeg.test(val)){
                return true;
            }else{
                return false;
            }
        }

        function pre_page(){
            var actionLi = alUl.children("li.active");
            var current = actionLi.children("a").text();
            if(current >1){
                var prevli = actionLi.prev().prev().find("a");
                if(prevli.length==0){
                    control.init_page_btn( parseInt(current)-1);
                } else{
                    control.currentPage = parseInt(current)-1;
                    actionLi.removeClass("active");
                    actionLi.prev().addClass("active");
                    control. $el.find(".current-page").val(control.currentPage);
                }
                control.callBack(control.currentPage, control.pageSize,control.total);
            }
        }
        function select_page(_this){
            if( $(_this).text() == control.currentPage ){
                return;
            }
            var actionLi = alUl.children("li.active");
            //样式
            actionLi.removeClass("active");
            $(_this).parent().addClass("active");
            control.currentPage = $(_this).text();
            var actionLi = alUl.children("li.active");
            var nextLia =   $(_this).parent().next().find("a");
            var pevLia =   $(_this).parent().prev().find("a");
            if(nextLia.length==0 || pevLia.length == 0){
                control.init_page_btn(control.currentPage);
            } else{
                control. $el.find(".current-page").val(control.currentPage);
            }
            control.callBack(control.currentPage, control.pageSize,control.total);
        }
        function next_page(){
            //var total_page =  control.$el.find(".total-page").text();
//        var alLi = alUl.children("li:not(.pre,.next)");
            var actionLi = alUl.children("li.active");
            var current = actionLi.children("a").text();
            if(parseInt(current) < parseInt(control.totalPage) ){
                var nextli = actionLi.next().next().find("a");
                if(nextli.length==0){
                    control.init_page_btn(parseInt(current)+1);
                } else {
                    control.currentPage = parseInt(current) + 1
                    actionLi.removeClass("active");
                    actionLi.next().addClass("active");
                    control.$el.find(".current-page").val(control.currentPage);
                }
                control.callBack(control.currentPage, control.pageSize,control.total);
            }
        }
        function changePageSize(_value){
            control.pageSize = _value;
            control.totalPage =control.total%control.pageSize>0?Math.ceil(control.total/control.pageSize):parseInt(control.total/control.pageSize);
            control.currentPage = 1;
            control.init_page_btn(control.currentPage);
            control.$el.find(".total-page").text(control.totalPage);
        }

        control.$el.find(".prev>a").on("click",function(){
            pre_page();
        });
        control.$el.find(".next>a").on("click",function(){
            next_page();
        });
        alLi.find("a").on("click",function(i,_this){
            select_page(this);
        });
        //select 监听
        control. $el.find("[name='page-size']").on('change',function(){
            //console.info(this.value);
            changePageSize(this.value);
            control.callBack(control.currentPage, control.pageSize,control.total);
        });
        var src_current_page;
        control.$el.find(".current-page").on("focus",function(){
            src_current_page = this.value;
        });
        //当前显示页 监听
        control.$el.find(".current-page").on("blur",function(){
            var _val = this.value;
            var total_page =  control.$el.find(".total-page").text();
            if(isIntNum(src_current_page)&&isIntNum(_val)){
                if(parseInt(_val) <1){
                    _val = 1;
                };
                if(parseInt(_val)>parseInt(total_page)){
                    _val = total_page;
                };
                if(src_current_page != _val){
                    control.init_page_btn(parseInt(_val));
                }else{
                    control.currentPage =_val;
                    control.$el.find(".current-page").val(control.currentPage);
                }
                control.callBack(control.currentPage, control.pageSize,control.total);
            }else{
                control.currentPage =src_current_page;
                control.$el.find(".current-page").val(control.currentPage);
            }
        });

    }
    return paginationyl;
}));

/***************************************/

paginationyl.css
.current-page{
    width: 40px;
    outline:none;
    border:none;
    border-bottom: 1px solid #ccc;
}
.left-detail{
    float: left;
}
.right-btn{
    float: right;
}
.right-btn a{
    font-size: 14px;
    color: #ccc;
}
.right-btn  .page-ul li{
    display: inline;
}
.right-btn  .page-ul{
    margin-bottom: 1px;
}
.right-btn .page-ul .active{
    background-color: #0088cc;
    color: #ffffff;
}
.right-btn .page-ul .active a{
    background-color: #0088cc;
    color: #ffffff;
}
.right-btn  .page-ul li{
    margin: 0px 3px;
}
.right-btn  .page-ul li a{
    padding: 3px;
    margin: 0px 0px;
}

/*********************html*****main.css和main-all.css此处不需要****************/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>LULU 分页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../../../css/my/paginationyl.css"/>
    <link href="../../css/main.css" rel="stylesheet" />
    <link href="../../css/main-all.css" rel="stylesheet" />
    <script src="../../../js/jquery-1.12.5.js"/>
    <script src="../../../bootstrap/js/bootstrap.js"></script>
    <style>
    </style>
</head>
<body οnlοad="test();var i = 1;var testV = $('#testss').val();console.info(testV)">
<input type="text" id="testss" value="111"/>
<div class="container"  style="margin: 0 auto;padding:3px 5px;width: 100%">
    <table id ="tableP" cellspacing="0" cellpadding="0" border="1" style="width: 100%">
    </table>
    <div id="pageDefined">
    </div>
    <br/>
    <div id="pageDefinedTest"></div>
</div>
<script  src="../../../js/my/paginationyl.js"></script>
<script>
    $("#pageDefinedTest").paginationyl({
        total:200,
        pageSize:10,
        btnSize:9
    });
    function  test(){
        //测试html中写js
        console.info("test function");
    }
    /**
     * Created by YL on 2018/4/25.
     */
    function createTable(parent,headres,datas){
        //创建表格
        var table = $("<table>");
        //将表格追加到父容器中
        parent.append(table);
        //设置table的样式
        table.attr({
            "cellSpacing":0,
            "cellPadding":0,
            "border":"1px"
        }).css({
            "width":"100%"
        });
        //创建表头
        var thead = $("<thead>");
        //将标题追加到table中
        table.append(thead);
        //创建tr
        var tr =$("<tr>");
        //将tr追加到thead中
        thead.append(tr);
        //设置tr的样式属性
        tr.css({
            "height":"50px",
            "background-color":"lightgray"
        });

        //遍历headers中的数据
        for(var i =0;i<headres.length;i++){
            //创建th
            var th = $("<th>");
            //将th追加到thead中的tr中
            tr.append(th);
            //将headers的数据找到对应的th放进去  此处 用到了setInnerText()函数 调用common.js
            if("checkbox" ==headres[i]){
                th.append($('<input type="checkbox"/>'))
            }else{
                th.text(headres[i]);
            }
        }
        var th = $("<th>");
        tr.append(th);
        th.text("操作");
        //创建tbodt
//        createTbody(parent,table,datas);
    };
    function createTbody(parent,table,datas){
        //创建tbody
        var tbody = $("<tbody>");
        //将tbody追加到table中
        table.append(tbody);
        //设置tbody的样式属性
        tbody.css({
            "text-align":"center"
        });
        //遍历得到数据源
        for(var i=0;i<datas.length;i++){
            //获取没想数据
            var data =datas[i];
            //创建tr
           var  tr = $("<tr>");
            //将tr追加到tbody中
            tbody.append(tr);
            //设置tbody中tr的属性
            tr.css({
                "height":"40px"
            })
            //遍历对象的属性
            var td = $("<td>");
            td.append($('<input type="checkbox"/>'))
            tr.append(td);
            for(var key in data){
                //创建td
                 td = $("<td>");
                //追加到tbody中的tr中
                tr.append(td);
                //将得到的没项属性添加到每一个td中
                td.text(data[key]);
            }
            //创建操作列
            td = $("<td>");
            //追加到tr中
            tr.append(td);
            //给td设置a标签
            var aRemove = $("<a href='javaScript:;'>删除</a>").click(function(){
                datas.splice(i,1);
                //删除table
                parent.remove(table);
                //重新创建table
                createTable(parent,headers,datas);
            });
            td.append(aRemove) ;

            //判断tr隔行变色
            //鼠标移动上去高亮显示
            if(i%2==0){
                //奇数行
                tr.css({
                    "background-color":"pink"
                })
            }else{
                //偶数行
                tr.css({
                    "background-color":"#B9FFCF"
                })
            }
            //注册事件高亮显示
            var bg;
            //鼠标经过
            tr.mouseover(function () {
                bg =tr[0].style.backgroundColor;
                this.style.backgroundColor = "#4BE1FF";
            });
            //鼠标离开
            tr.mouseout(function(){
                console.info(bg)
                this.style.backgroundColor = bg;
            });
        }
    };
    function showTableData(tbody,datas,pagination){
        var totalcC = datas.total;

    }

   $(function(){
       $.ajax({
           url:"../../data/分页.json",
           success:function(result){
               console.info(result);
               var headers = [{type:"checkbox"},
                   {type:"String",filed:"text",name:"名字"},
                   {type:"String",filed:"text1",name:"名字1"},
                   {type:"String",filed:"text2",name:"名字2"},
                   {type:"operate",name:"操作"}];
               createTable($("#tableP"),headers,result);

           }
       });
   });
    function createTable(table,headers,data){
        var thead = $("<thead>");
        var tbody = $("<tbody>");
        table.append(thead).append(tbody);
        var tr =$("<tr>");
        thead.append(tr);
        tr.css({
            "height":"25px",
            "background-color":"lightgray"
        });
        for(var i =0;i<headers.length;i++){
            //创建th
            var th = $("<th>");
            //将th追加到thead中的tr中
            tr.append(th);
            //将headers的数据找到对应的th放进去  此处 用到了setInnerText()函数 调用common.js
            if("checkbox" ==headers[i].type){
                th.css({"width":"18px","text-align":"center"});
                th.append($('<input type="checkbox"/>'))
            }else if("radio" ==headers[i].type){
                th.css({"width":"18px","text-align":"center"});
                th.append($('<input type="radio"/>'))
            }else if("operate"==headers[i].type){
                th.css({"width":"80px","text-align":"center"});
                th.text(headers[i].name);
            }else{
                th.text(headers[i].name);
            }
        }
        createTData(tbody,headers,data);
    }

    function createTData(tbody,headers,data){
        var testP=$("#pageDefined").paginationyl({
            total:data.total,
            pageSize:5,
            btnSize:6,
            selectPageSize:[5,30,50],
            init:function(cur,psize,total){
                var start = (cur-1)*psize;
                var tableData = data.data;
                for(var i = start; i<(start+parseInt(psize));i++){
                    if(tableData[i])
                    createTr(tbody,headers,tableData[i]);
                }

            },
            callBack:function(cur,psize,total){
                tbody.empty();
//                console.info(cur+"  "+psize);
                var tableData = data.data;
                var start = (cur-1)*psize;
                var tableData = data.data;
                for(var i = start; i<(start+parseInt(psize));i++){
                    if(tableData[i])
                    createTr(tbody,headers,tableData[i]);
                }
            }
        });

//        console.info(testP);
    }

    function createTr(tbody,headers,data){
        var tr = $("<tr>");
        for(var i =0;i<headers.length;i++){
            //创建th
            var td = $("<td>");
            //将th追加到thead中的tr中
            tr.append(td);
            //将headers的数据找到对应的th放进去  此处 用到了setInnerText()函数 调用common.js
            if("checkbox" ==headers[i].type){
                td.css({"width":"18px","text-align":"center"});
                td.append($('<input type="checkbox"/>'))
            }else if("radio" ==headers[i].type){
                td.css({"width":"18px","text-align":"center"});
                td.append($('<input type="radio"/>'))
            }else if("String"==headers[i].type){
                if(data && headers[i].filed)
                {
                    td.text(data[headers[i].filed]);
                }

            }else if("operate"==headers[i].type){
                if(data)
                td.append($('<input type="button" value="添加"/>'))
            }
        }
        tbody.append(tr);
    }
</script>
</body>
</html>

/******************效果*****************************/

 

 

转载于:https://my.oschina.net/u/2948019/blog/1800959