分享一下自己在项目中引用的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. 实习培训——Servlet（6）

    实习培训——Servlet(6) 1  Servlet 客户端 HTTP 请求 当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的 ...

  2. js实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 2：2 strus2的配置文件

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

  4. GCC编译器ABI

    ABI与EABI 1)ABI(Application Binary Interface for the ARM Architecture),描述了应用程序与cpu内核的低级接口. ABI允许编译好的目 ...

  5. no-siteapp 和 no-transform

    简单的说,是禁止转码 . 举个通俗的例子. 你建了一栋房子(网站),百度说我给你做个大门,但是大门上要有我的广告 你不愿意,就建立了一条路叫no-transform 别人去你家走这条路就行了 后来百度 ...

  6. FastDFS+nginx+keepalived集群搭建

    安装环境 nginx-1.6.2 libfastcommon-master.zip FastDFS_v5.05.tar.gz(http://sourceforge.net/projects/fastd ...

  7. Keepalived保证Nginx高可用配置

    Keepalived保证Nginx高可用配置部署环境 keepalived-1.2.18 nginx-1.6.2 VM虚拟机redhat6.5-x64:192.168.1.201.192.168.1. ...

  8. Ignite集群管理——基于Zookeeper的节点发现

    Ignite支持基于组播,静态IP,Zookeeper,JDBC等方式发现节点,本文主要介绍基于Zookeeper的节点发现. 环境准备,两台笔记本电脑A,B.A笔记本上使用VMware虚拟机安装了U ...

  9. eclispe 相关设置

    1. 关闭js文件校验: 1). windows->preference->Java Script->Validator->Errors/Warnings->Enable ...

  10. 20145316许心远《网络对抗》MSF基础应用

    20145316许心远<网络对抗>MSF基础应用 实验后回答问题 用自己的话解释什么是exploit,payload,encode. exploit:顾名思义就是攻击嘛,因为是个动词,所以 ...