分享一下自己在项目中引用的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. Elasticsearch Date类型使用技巧

    elasticsearch原生支持date类型.这里简单记录下使用的方法. 使用date类型可以用如下两种方式: 使用毫秒的时间戳,直接将毫秒值传入即可. 传入格式化的字符串,默认是ISO 8601标 ...

  2. [LeetCode] 697. Degree of an Array_Easy tag: Hash Table

    Given a non-empty array of non-negative integers nums, the degree of this array is defined as the ma ...

  3. html02

    复习:HTML标记 p h1~h6 font table>tr>td ul>li ol>li div span form:input>typy :password rad ...

  4. Fortran入门：Windows平台的Fortran编译器安装和使用

    因为课程需要,今年开始学习FORTRAN语言.之前学校的计算概论用的是C,后来又学了C++和Python作为面向对象的工具,数值计算方面主要通过学校的许可证用的MATLAB.因为专业侧重数值模拟和反演 ...

  5. java反射之根据全类名创建对象

    现在的需求是根据类的全名.来创建对象 package 中介者设计模式; import java.util.Date; public class CreateObject { public static ...

  6. 3：2 OGNL 简介

    OGNL : (对象图导航语言) 从一个对象到另一个对象 OGNL来源于Xwork: OGNL的作用: OGNL在数据进出值栈的时候进行类型转换

  7. python学习第一次

    一,安装python 官网下载地址:https://www.python.org/downloads/windows/ 我下载的是最新的: Download Windows x86 web-based ...

  8. yii2中关联查询

    yii2 ActiveRecord多表关联以及多表关联搜索的实现 一个老生常谈的问题.最近通过群里的反馈,觉得很多人还是没有去理解这个问题.今天把这个问题讲明白了,看看yii2 ActiveRecor ...

  9. Codeforces Round #246 (Div. 2) D E

    这题说的是给了一个字符串当前缀和后缀相同的时候就计算此时的 整个串种拥有这样的子串友多少个,没想到用KMP解 用0开头的那种类型的 KMP 今天刚好也学了一下,因为KMP的作用是找出最长前缀 KMP ...

  10. K好数

    有点坑 在他这里 0不算一位数 #include <iostream> #include <cstdio> #include <string.h> using na ...