分享一下自己在项目中引用的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. Unity 脚本的执行顺序

    在Unity脚本中常用到的函数就是下面这些,他们的顺序也是按照箭头的方向执行的. Awake ->OnEable-> Start -> FixedUpdate-> Update ...

  2. POJ:2049Finding Nemo(bfs+优先队列)

    http://poj.org/problem?id=2049 Description Nemo is a naughty boy. One day he went into the deep sea ...

  3. hdu1251(统计难题）

    这题就是一个字典树的模板题 统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Othe ...

  4. Linux环境下解压rar文件

    可以用unrar命令解压rar后缀的文件 unrar e test.rar 解压文件到当前目录 unrar x test.rar /path/to/extract unrar l test.rar 查 ...

  5. [LeetCode] 851. Loud and Rich_ Medium tag: DFS

    In a group of N people (labelled 0, 1, 2, ..., N-1), each person has different amounts of money, and ...

  6. Python 进制转换、位运算

    一.进制转换 编程用十进制,十进制转换为二进制.八进制.十六进制 In [135]: bin(23) Out[135]: '0b10111' In [136]: oct(23) Out[136]: ' ...

  7. Python做接口自动化测试框架

    框架结构如下: Test_Api_Project||---base.py|---base_api| |---register_api.py | |---send_sms_code_api.py|--- ...

  8. js五星好评

    一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...

  9. JavaScript循环练习2

    折纸:折多少次和珠穆朗玛峰一样高1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 var hou = 0.0001; var cishu = 0; for(var i= ...

  10. 2：2 strus2的配置文件

    strus2 的xml配置文件主要负责Action的管理,常放在WEB-INF/classes目录下,被自动加载 在strus-core jar包下找dtd文件,里面有xml的头信息.也有contan ...