分享一下自己在项目中引用的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. idea安装插件

    方法1:file>settings>pulgins>browse repositories>输入要安装的插件>install 方法2:本地安装,如果在browse中没有找 ...

  2. 设置pip的默认源

    Python在导入第三方模块的时候用设置豆瓣源的方法提高效率,每次设置很麻烦,所以通过下面方法设置默认源,这样就可以直接pip install package,而不用指定源了. [global] ti ...

  3. [LeetCode] 476. Number Complement_Easy tag: Bit Manipulation

    这个题目思路就是比如101 的结果是010, 可以从111^101 来得到, 那么我们就需要知道刚好比101多一位的1000, 所以利用 while i <= num : i <<= ...

  4. Locust性能测试4-参数关联

    前言 前面[Locust性能测试2-先登录场景案例]讲了登录的案例,这种是直接传账号和密码就能登录了,有些登录的网站会复杂一点, 需要先从页面上动态获取参数,作为登录接口的请求参数,如[学信网:htt ...

  5. Jmeter接口测试自动化 （三）（数据驱动测试）

    本文转载至http://www.cnblogs.com/chengtch/p/6105532.html 当我研究要通过用例优先级控制用例是否执行时,我发现了用"如果(if)控制器" ...

  6. vue项目优化

    cross-env 包环境 静态文件分离 require 是置顶的 双斜杠   //baidu.com可以是http也可以是https require.ensure打包到不同的文件中 项目文件路径规范 ...

  7. js时钟

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

  8. camera原理

    1)Color Filter Array---CFA 图像传感器都采用一定的模式来采集图像数据,常用的有 BGR 模式和 CFA 模式.BGR 模式是一种可直接进行显示和压缩等处理的图像数据模式,它 ...

  9. 【kafka学习之二】Kafka集群搭建

    安装环境    jdk1.7 zookeeper-3.4.5(参考 https://www.cnblogs.com/cac2020/p/9426531.html) VM虚拟机redhat6.5-x64 ...

  10. HTML ajax 上传文件限制文件的类型和文件大小

    html    <input type="file" name="excel" id="excel_input" accept=&qu ...