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

简介: 原文:[原创]jquery+css3打造一款ajax分页插件最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是帮我们取代js中这部分动画代码的使j...
原文: [原创]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提交的参数也有处理

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

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

 

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

 

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

目录
相关文章
|
28天前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
61 1
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
31 1
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
20 1
|
3月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
138 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
3月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
31 0
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
JavaScript 前端开发
Ajax无刷新分页源码--未使用分页控件
源码下载:点击下载 强类型的DataSet中添加分页的方法:GetPageData(startRowIndex,endRowIndex) 和SelectCount()两个方法; GetPageData代码:里面的参数自己添加,因为VS不支持over(); select * from ( ...
943 0
|
12月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
83 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
135 0