jquery+css3打造一款ajax分页插件

原文: [原创]jquery+css3打造一款ajax分页插件

最近公司的项目将好多分页改成了ajax的前台分页
以前写的分页插件就不好用了，遂重写一个

支持IE6+，但没有动画效果
如果没有硬需求，个人认为没必要多写js让动画在这些浏览器中实现
css3的动画本来就是帮我们取代js中这部分动画代码的
使js更纯粹地去实现逻辑

效果图如下：

 

调用代码如下：

包括常用的加载失败重试，参数可配置是否能手动输入页码，设置按钮数目，可以调用多个page等等，调用代码很简便

<script type="text/javascript">

    var kpage;



    $(function () {

        tocount();

    });



    function tocount() {

        //初始化

        $.ajax({ url: "/Service/DBCount", type: "post", success: function (e) {

            kpage = $("#divPage").page({ dataCount: e, pageChange: topage });

        }

        });

    }



    function topage(i, s) {

        //数据查询

        $("#divInfo").html("加载中...");

        $.ajax({ url: "/Service/List", type: "post", data: { PageSize: s, PageIndex: i }, success: function (r) {

            $("#tList").html(r);

            $("#divInfo").html("");

        }, error: function () {

            $("#divInfo").html("加载失败...<a href='javascript:reload();'>重试</href>");

        }

        });

    }



    function reload() {

        kpage.reload();

    }



</script>

 

具体jquery.kun_page.js：

/*

jquery.kun_page.js

lxk 2014.06.16

www.cnblogs.com/wingkun



---------------------------------

参数config:



dataCount:数据总数



pageSize:页数据条数



maxButton:页码按钮数目

  

showCustom:是否能手动输入页码   



pageChange:页变更事件

参数：(i,s,c)

i:pageIndex,当前页

s:pageSize,页数据条数

c:pageCount,总页数



*/



(function($){



$.fn.page = function (config) {



    if (this.length != 1) {

        throw "k_page:如有多个page请调用多次!";

    }



   

    var defaults = { dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null }

    config = $.extend(defaults, config);



    if (config.maxButton <= 1) config.maxButton = 2;

    if (config.pageSize < 1) config.pageSize = 1;

    //按钮数目需偶数

    if (config.maxButton % 2 != 0)

        config.maxButton++;



    var pageIndex = 1, pageCount, move_kf;



    //初始化页数

    function initcount() {

        pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1;

    }

    initcount();



    var prev = "<div class='k_p_prev'><i></i>上一页</div>", next = "<div class='k_p_next'>下一页<i></i></div>", pbody = $("<span style='display:block;float:left;overflow:hidden;'></span>"), pcustom = $("<span class='k_custom'>到第&nbsp;<span></span>&nbsp;页 </span><div class='k_btn'>确定</div>"), cl = "<div class='k_cl'></div>", pipt = $("<input class='k_ipt'>");

    this.empty().addClass("kun_page").append(prev);

    pipt.keypress(function (e) {

        if (e.which == 13) {

            topage("确定");

            return false;

        }

    }).appendTo(pcustom.children());



    if (config.pageChange) {

        this.unbind("click").bind("click", function (e) {

            var _t = $(e.target);

            if (_t[0].tagName == "DIV" && _t[0].className != "kun_page") {

                topage(_t.text());

            }

        });

    }



    //跳转页码

    function topage(text) {



        switch (text) {

            case "上一页":

                if (pageIndex - 1 < 1) {

                    return;

                }

                pageIndex--;

                move_kf = "sc_r";

                break;

            case "下一页":

                if (pageIndex + 1 > pageCount) {

                    return;

                }

                pageIndex++;

                move_kf = "sc_l";

                break;

            case "确定":



                if (!/^\d+$/.test(pipt.val())) {

                    pipt.val("");

                    return;

                }

                text = parseInt(pipt.val());

                if (text < 1 || text > pageCount) {

                    pipt.val("");

                    return;

                }



            default:

                var _pindex = parseInt(text);

                if (pageIndex == _pindex)

                    return;

                move_kf = pageIndex < _pindex ? "sc_l" : "sc_r";

                pageIndex = _pindex;

                break;

        }



        gopageChange();

    }



    //页变更事件

    function gopageChange() {

        if (config.pageChange) {

            if (config.dataCount != 0) {

                config.pageChange(pageIndex, config.pageSize, pageCount);

                endloading();

            }

        }

    }



    //异步加载结束

    function endloading() {

        initpage();



    }



    //添加页码

    function initpage() {

        pbody.empty();

        var _t_maxb = config.maxButton / 2;

        //前后页码集合

        var _t_listp = [], _t_listn = [];

        var _min = 0, _max = pageCount;



        for (var i = 1; i <= _t_maxb; i++) {

            var _t_prev = pageIndex - i, _t_next = pageIndex + i;

            //当前页码之前的页

            if (_t_prev > 0) {

                _t_listp.push("<div class='k_p_page'>" + _t_prev + "</div>");

                if (i == _t_maxb) _min = _t_prev;

            }

            //当前页码之后的页

            if (_t_next <= pageCount) {

                _t_listn.push("<div class='k_p_page'>" + _t_next + "</div>");

                if (i == _t_maxb) _max = _t_next;

            }

        }

        //显示第一页

        if (_min > 1) pbody.append("<div class='k_p_page'>1</div>");

        //显示前 ……

        if (_min - 1 > 1) pbody.append("<em>...</em>");



        for (var i = _t_listp.length; i >= 0; i--) {

            pbody.append(_t_listp[i]);

        }



        pbody.append("<div class='k_p_page k_p_current'>" + pageIndex + "<i class='k_m " + move_kf + "'></i></div>");



        for (var i = 0; i < _t_listn.length; i++) {

            pbody.append(_t_listn[i]);

        }



        //显示后 ……

        if (pageCount - _max > 1) pbody.append("<em>...</em>");



        //显示最后一页

        if (_max < pageCount) pbody.append("<div class='k_p_page'>" + pageCount + "</div>");



    }



    initpage();

    gopageChange();



    this.append(pbody).append(next);

    if (config.showCustom)

        this.append(pcustom);

    this.append(cl);



    return { reload: gopageChange, pageCount: pageCount, recount: function (e) {

        //重新计算页数

        config.dataCount = e;

        pageIndex = 1;

        initcount();

        initpage();

        gopageChange();

    }

    };



    //console.log(_min + "*" + _max + "*" + pageCount);

}





})(jQuery)

View Code

样式kun_page.css：

/*

    kun_page.css

    lxk 2014.06.16

    www.cnblogs.com/wingkun

*/





.kun_page {font-size: 12px;line-height:23px;font-family:"Microsoft YaHei";}

.kun_page .k_p_page{position:relative;}

.kun_page div {float: left;margin: 3px;border: solid 1px #ccc;cursor: pointer;color: #333;min-width:12px;text-align:center;padding:0px 5px;}

.kun_page em {display: block;float: left;margin: 2px;}

.kun_page .k_p_current {background: #ccc;color: #fff;-webkit-animation:scroll_b 300ms;animation:scroll_b 300ms;}

.kun_page .k_cl {clear: both;float: none;border: none;margin: 0px;padding: 0px;width:0px;height:0px;}

.kun_page .k_custom {display: block;float: left;margin: 3px 3px 3px 20px;}

.kun_page .k_ipt {width: 30px;height: 21px;border: solid 1px #ccc;text-align: center;vertical-align:middle;}

.kun_page .k_m{ opacity: 0; width: 1%; height: 1%;top:0px;left:0px; display:block; position: absolute; }

.kun_page .sc_l{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#CCCCCC), to(#645F5F));

    -webkit-transform:translate(-50px);-webkit-animation:scroll_k_l 300ms linear;

    background: -moz-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);

    background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);

    transform:translate(-50px);animation:scroll_k_l 300ms linear;

    

    }

.kun_page .sc_r{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#645F5F), to(#CCCCCC));

    -webkit-transform:translate(50px); -webkit-animation:scroll_k_r 300ms linear;

    background: -moz-linear-gradient(left, #645F5F 0%, #CCCCCC 100%);

    background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);

    transform:translate(50px); animation:scroll_k_r 300ms linear;

    }



/*

animation

*/



@-webkit-keyframes scroll_k_l{

0%{-webkit-transform:translate(-100px);opacity:0.2;width:200%;height:100%;}

99%{-webkit-transform:translate(-20px);opacity:0;width:200%;height:100%;}

100%{-webkit-transform:translate(-20px);opacity:0;width:1%;height:1%;}

}



@-webkit-keyframes scroll_k_r{

0%{-webkit-transform:translate(100px);opacity:0.2;width:200%;height:100%;}

99%{-webkit-transform:translate(20px);opacity:0;width:200%;height:100%;}

100%{-webkit-transform:translate(20px);opacity:0;width:1%;height:1%;}

}



@keyframes scroll_k_l{

0%{transform:translate(-100px);opacity:0.2;width:200%;height:100%;}

99%{transform:translate(-20px);opacity:0;width:200%;height:100%;}

100%{transform:translate(-20px);opacity:0;width:1%;height:1%;}

}



@keyframes scroll_k_r{

0%{transform:translate(100px);opacity:0.2;width:200%;height:100%;}

99%{transform:translate(20px);opacity:0;width:200%;height:100%;}

100%{transform:translate(20px);opacity:0;width:1%;height:1%;}

}





@-webkit-keyframes scroll_b{

0%,99%{background: #fff;color: #000;}

100%{background: #ccc;color: #fff;}

}

@keyframes scroll_b{

0%,99%{background: #fff;color: #000;}

100%{background: #ccc;color: #fff;}

}

View Code

样式和动画都可以自己修改(好吧，动画效果很朴素，闹哪样，明明想了很久好吗)

pageChange事件里面也没有过多的其他处理，比如我们公司前后台处理json就有一套方案，ajax提交的参数也有处理

所以若有需求，完全可以在我的代码上再封装一层

另外插件内公开的方法暂只有几个，可视情况增加

 

喜欢的可以帮我点一下“推荐”，谢啦！

 

代码下载(后台查询代码需要自己写一个)：这里