分享一下自己在项目中引用的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:; padding:; 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:  10px;border: 1px solid #ddd;    margin:  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:  10px;margin:  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:  10px;margin:  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="js/jquery-1.8.3.min.js"></script>

<script src="js/jquery.page.js"></script>

<script>

    $(".tcdPageCode").createPage({

        pageCount:,

        current:,

        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 > ){

                    obj.append('<a href="javascript:;" class="prevPage">上一页</a>');

                }else{

                    obj.remove('.prevPage');

                    obj.append('<span class="disabled">上一页</span>');

                }

                //中间页码

                if(args.current !=  && args.current >=  && args.pageCount != ){

                    obj.append('<a href="javascript:;" class="tcdNumber">'++'</a>');

                }

                if(args.current- >  && args.current <= args.pageCount && args.pageCount > ){

                    obj.append('<span>...</span>');

                }

                var start = args.current -,end = args.current+;

                if((start >  && args.current < )||args.current == ){

                    end++;

                }

                if(args.current > args.pageCount- && args.current >= args.pageCount){

                    start--;

                }

                for (;start <= end; start++) {

                    if(start <= args.pageCount && start >= ){

                        if(start != args.current){

                            obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');

                        }else{

                            obj.append('<span class="current">'+ start +'</span>');

                        }

                    }

                }

                if(args.current +  < args.pageCount -  && args.current >=  && args.pageCount > ){

                    obj.append('<span>...</span>');

                }

                if(args.current != args.pageCount && args.current < args.pageCount -  && args.pageCount != ){

                    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-,"pageCount":args.pageCount});

                    if(typeof(args.backFn)=="function"){

                        args.backFn(current-);

                    }

                });

                //下一页

                obj.on("click","a.nextPage",function(){

                    var current = parseInt(obj.children("span.current").text());

                    ms.fillHtml(obj,{"current":current+,"pageCount":args.pageCount});

                    if(typeof(args.backFn)=="function"){

                        args.backFn(current+);

                    }

                });

            })();

        }

    }

    $.fn.createPage = function(options){

        var args = $.extend({

            pageCount : ,

            current : ,

            backFn : function(){}

        },options);

        ms.init(this,args);

    }

})(jQuery);

项目中

    function AD(s){

        var postData = {TypeId:@ViewBag.keyValue,page:s };

        postData = JSON.stringify(postData);

        var data={queryJson:postData};

        $.SetForm({

            url: "../../publicinfomanage/notice/getpagelistjson",

            param: data,

            success: function (result) {

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

                var htmls = "";

                for (var i = ; i < result.rows.length; i++) {

                    if (result.rows[i].FullHeadColor != undefined) {

                        htmls += "<li><a href='#' onclick=\"addTabs('','/publicinfomanage/notice/detail?keyvalue="+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(,)  + "</span></li>";

                    }else{

                        htmls += "<li><a href='#' onclick=\"addTabs('','/publicinfomanage/notice/detail?keyvalue="+result.rows[i].NewsId+"','企业文化-"+result.rows[i].FullHead+"')\">" + result.rows[i].FullHead + "</a><span style='float:right;'>" + result.rows[i].CreateDate.substring(,)  + "</span></li>";

                    }

                }

                $("#NLS").html(htmls);

            }

        })

    }

    function pageCont(pc){

        $(".tcdPageCode").createPage({

            pageCount:pc,

            current:1,

            backFn:function(p){

                AD(p);　　//p返回是当前第几页

            }

        });

    }

jQuery.page 分页控件的更多相关文章

  1. jquery.bootpag分页控件

    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src=& ...

  2. MVC Page分页控件

    MVCPage帮助类 控制器代码 public ActionResult Article(int? page) { //Session["ArticleClass"] = cont ...

  3. 基于jquery扩展漂亮的分页控件（ajax）

    分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等 ...

  4. ajax 分页控件，基于jquery

    /* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...

  5. 自己写的简单的jQuery分页控件

    因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过Jquery控件,硬着头皮找了些资料,写了这个分页控件,目 ...

  6. jQuery Pagination Plugin ajax分页控件

    <html> <body> <div id="datagrid"> </div> <div id="paginati ...

  7. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  8. jquery 分页控件1

    jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...

  9. 基于avalon+jquery做的bootstrap分页控件

    刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...

随机推荐

  1. NYOJ 47

    思路: 在n>3的时候就用前两个小的来带后两个大的,有两种方式(一就是1,2先过,然后1回来,然后n,n-1过,然后2,回来),(二就是 1,n先过去 然后1回来,然后 1,n-1过去吗.,然后 ...

  2. （转）找回Git中丢失的Commit

    总结:更新代码前一定要先将本地修改的文件存到本地git仓库.今天脑残直接更新了远程仓库代码导入今天写的代码...... @[git|commit|reflog] 在使用Git的过程中,有时候会因为一些 ...

  3. Appium-Python-Client安装

    官网是这个:https://pypi.org/project/Appium-Python-Client/#files 下载下来后是这样的文件不知道怎么安装: 不用下载,直接这样就可以 了~~ 安装后导 ...

  4. [LeetCode] 256. Paint House_Easy tag: Dynamic Programming

    There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...

  5. Django-made基础

    知识预览 ORM 创建表(建立模型) 添加表记录 查询表记录 修改表记录 删除表记录 回到顶部 ORM 映射关系: 表名 <-------> 类名 字段 <-------> 属 ...

  6. python （ EOL while scanning string literal）

    python错误: EOL while scanning string literal: 这个异常造成的原因是字符串,引号没有成对出现 参考:http://www.jb51.net/article/6 ...

  7. Python: os.listdir()

    os.listdir(): 返回一个列表,此列表包含参数路径下的的文件名或文件夹名.这个列表以字母为顺序. eg: >>>import os >>>dirs=os. ...

  8. tomcat和jetty区别

    参见:https://www.cnblogs.com/fengli9998/p/7247559.html 1. Jetty更轻量级.这是相对Tomcat而言的. 由于Tomcat除了遵循Java Se ...

  9. 有趣的js匿名函数写法（function嵌套)

    例子没有什么实际意义,只能做为思路参考 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  10. P2486 [SDOI2011]染色

    P2486 [SDOI2011]染色 树链剖分 用区间修改线段树维护 对于颜色段的计算:sum[o]=sum[lc]+sum[rc] 因为可能重复计算,即左子树的右端点和右子树的左端点可能颜色相同 多 ...