首页 > 代码库 > jQueryPager20160918 分页控件

jQueryPager20160918 分页控件

2024-09-07 11:36:19   219人阅读

分享一下自己在项目中引用的Jquery分页控件

技术分享

技术分享

index.html内容

<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>简单的jQuery分页插件下载</title>
<style>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;    line-height: 25px;    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
</head>
<body>
<br><br><br>

<div class="tcdPageCode"></div>

<script src=http://www.mamicode.com/"js/jquery-1.8.3.min.js"></script>
<script src=http://www.mamicode.com/"js/jquery.page.js"></script>
<script>
    $(".tcdPageCode").createPage({
        pageCount:15,
        current:2,
        backFn:function(p){
            //console.log(p);
            $("#tcdPageCode").html+="总条数："+total;
        },
        
    });
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
</div>
</body>
</html>

 

jquery.page.js中的内容

(function($){
    var ms = {
        init:function(obj,args){
            return (function(){
                ms.fillHtml(obj,args);
                ms.bindEvent(obj,args);
            })();
        },
        //填充html
        fillHtml:function(obj,args){
            return (function(){
                obj.empty();
                //上一页
                if(args.current > 1){
                    obj.append(‘<a href="javascript:;" class="prevPage">上一页</a>‘);
                }else{
                    obj.remove(‘.prevPage‘);
                    obj.append(‘<span class="disabled">上一页</span>‘);
                }
                //中间页码
                if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
                    obj.append(‘<a href="javascript:;" class="tcdNumber">‘+1+‘</a>‘);
                }
                if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
                    obj.append(‘<span>...</span>‘);
                }
                var start = args.current -2,end = args.current+2;
                if((start > 1 && args.current < 4)||args.current == 1){
                    end++;
                }
                if(args.current > args.pageCount-4 && args.current >= args.pageCount){
                    start--;
                }
                for (;start <= end; start++) {
                    if(start <= args.pageCount && start >= 1){
                        if(start != args.current){
                            obj.append(‘<a href="javascript:;" class="tcdNumber">‘+ start +‘</a>‘);
                        }else{
                            obj.append(‘<span class="current">‘+ start +‘</span>‘);
                        }
                    }
                }
                if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
                    obj.append(‘<span>...</span>‘);
                }
                if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
                    obj.append(‘<a href="javascript:;" class="tcdNumber">‘+args.pageCount+‘</a>‘);
                }
                //下一页
                if(args.current < args.pageCount){
                    obj.append(‘<a href="javascript:;" class="nextPage">下一页</a>‘);
                }else{
                    obj.remove(‘.nextPage‘);
                    obj.append(‘<span class="disabled">下一页</span>‘);
                }
            })();
        },
        //绑定事件
        bindEvent:function(obj,args){
            return (function(){
                obj.on("click","a.tcdNumber",function(){
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
                //上一页
                obj.on("click","a.prevPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current-1);
                    }
                });
                //下一页
                obj.on("click","a.nextPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current+1);
                    }
                    
                });
            })();
        }
    }
    $.fn.createPage = function(options){
        var args = $.extend({
            pageCount : 15,
            current : 3,
            backFn : function(){}
        },options);
        ms.init(this,args);
    }
})(jQuery);

 

项目中 

    function AD(s){
        var postData =http://www.mamicode.com/ {TypeId:@ViewBag.keyValue,page:s };
        postData = JSON.stringify(postData);
        var data=http://www.mamicode.com/{queryJson:postData};
        
        $.SetForm({
            url: "../../publicinfomanage/notice/getpagelistjson",
            param: data,
            success: function (result) {
                $("#NLS").html("");
                var htmls = "";
                for (var i = 0; i < result.rows.length; i++) {
                    if (result.rows[i].FullHeadColor != undefined) {
                        htmls += "<li><a href=http://www.mamicode.com/‘#‘ onclick=/"addTabs(‘‘,‘/publicinfomanage/notice/detail?keyvalue=http://www.mamicode.com/"+result.rows[i].NewsId+"‘,‘企业文化-"+result.rows[i].FullHead+"‘)‘><font color=‘"+result.rows[i].FullHeadColor+"‘>" + result.rows[i].FullHead + "</font></a><span style=‘float:right;‘>" + result.rows[i].CreateDate.substring(0,10)  + "</span></li>";
                    }else{
                        htmls += "<li><a href=http://www.mamicode.com/‘#‘ onclick=/"addTabs(‘‘,‘/publicinfomanage/notice/detail?keyvalue=http://www.mamicode.com/"+result.rows[i].NewsId+"‘,‘企业文化-"+result.rows[i].FullHead+"‘)\">" + result.rows[i].FullHead + "</a><span style=‘float:right;‘>" + result.rows[i].CreateDate.substring(0,10)  + "</span></li>";
                    }
                }
                $("#NLS").html(htmls);
               
            }
        })
    }

    function pageCont(pc){
        $(".tcdPageCode").createPage({
            pageCount:pc,
            current:1,
            backFn:function(p){
                AD(p);　　//p返回是当前第几页
            }
        });
    }

 

jQueryPager20160918 分页控件


联系
我们