<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>一个非常简单的jQuery分页插件</title>

<style>

*{ margin:0; padding:0; list-style:none;}

a{ text-decoration:none;}

a:hover{ text-decoration:none;}

.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}

.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;	line-height: 25px;	padding: 0 10px;border: 1px solid #ddd;	margin: 0 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: 0 10px;margin: 0 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: 0 10px;margin: 0 2px;	color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}

</style>

</head>

<body>

<!-- 代码部分begin -->

    <div class="tcdPageCode">

    </div>

    <pre>

    调用方法：

    $(".tcdPageCode").createPage({

        pageCount:10,

        current:1,

        backFn:function(p){

            //单击回调方法，p是当前页码

        }

    });

    pageCount：总页数

    current：当前页

    </pre>

</body>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script>

<script>

    $(".tcdPageCode").createPage({

        pageCount:6,

        current:1,

        backFn:function(p){

            console.log(p);

        }

    });

</script>

<!-- 代码部分end -->

</html>

　　

很简洁的分页控件 适合MVC的更多相关文章

  1. Mvc 自带分页控件PagedList.Mvc Demo示例

    添加/下载PagedList.Mvc 直接搜索mvc pagelist 就会出来.安装完成即可.在项目的packages文件夹下面就会出现PagedList.Mvc.4.5.0.0 和PagedLis ...

  2. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  3. 基于存储过程的MVC开源分页控件

    基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...

  4. MVC无刷新查询，PagedList分页控件使用，导出Excel

    使用MVC开发也有一段时间了,总结下无刷新部分视图的使用.PagedList分页控件的使用. @using PagedList @model StaticPagedList<T> < ...

  5. 【干货分享】JPager.Net MVC超好用轻量级分页控件

    JPager.Net  MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net  MVC好用的轻量级分页控件,实现非常简单,使用也非常简单. JPager.Net  M ...

  6. MVC——分页控件

    不管是什么类型的网站,分页都是必不可少的功能实现.在这里记录一下我自己接触过的分页控件: 一. MvcPager控件(记得项目里添加MvcPager.dll的引用) 这里面比较常用的就 ——@Html ...

  7. Mvc自定义分页控件

    MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...

  8. Net MVC轻量级分页控件

    JPager.Net MVC超好用轻量级分页控件   JPager.Net  MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net  MVC好用的轻量级分页控件,实现 ...

  9. asp.net mvc简单实现基于Razor的分页控件

    最近在写一些web应用了解了一下asp.net mvc发现的确好用,所以直接就干上了.不过在使用asp.net mvc的Razor模板的情况并不向传统webform那样可以使用控件.但从Razor的功 ...

随机推荐

  1. jmeter响应信息unicode 编码转成中文

    在jmeter 发送请求过程中,有时候后台返回的是unicode 代码,如: {"status":-1,"msg":"\u63d0\u4ea4\u65 ...

  2. python3 装饰器应用举例

    [引子] python 中的装饰器是oop(面向对象编程)设计模式.之装饰器模式的一个应用.由于有语法糖衣的缘故.所以写起来也更加方便 [从一个比较经典的应用场景来讲解装饰器] 有过一定编程经历的工程 ...

  3. 关于Big Endian 和 Little Endian

    Big Endian 和 Little Endian 一.字节序 来自:http://ayazh.gjjblog.com/archives/1058846/ 谈到字节序的问题,必然牵涉到两大CPU派系 ...

  4. windows下bash终端--git-bash总汇

    git bash是一个比较好用的终端(win下),但有一些细节需要调整后才好用. 1.比如,登陆后终端的表格,以及个别符号显示为乱码. 解决方法: 1).点击git bash左上角,选择“option ...

  5. 如何在JS数组特定索引处指定位置插入元素？

    如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组var array = ["one&q ...

  6. iOS提交iTunes审核时出现Invalid Binary错误

    xcode5编译一个xcode4时写的代码,提交iTunes审核时出错. 1.iOS提交审核时出现Invalid Binary错误 2.收到邮件: iPhone 5 Optimization Requ ...

  7. [svc]linux正则及grep常用手法

    正则测试 可以用sublime等工具快速的检测正则是否合适 china : 匹配此行中任意位置有china字符的行 ^china : 匹配此以china开关的行 china$ : 匹配以china结尾 ...

  8. 50x页面放到本地单独目录下,进行显示

    error_page 500 502 503 504 /50x.html; location = /50x.html { root /data0/www/html; }

  9. ngx_http_stub_status_module

    ngx_http_stub_status_module是一个Nginx的内置 HTTP模块,该模块可以提供Nginx的状态信息.编译的时候 需指定加载该模块: --with-http_stub_sta ...

  10. dom4j: 生成XML时文本中回车换行无效

    属性文本中回车换行在输出时被dom4j自动去掉了. 解决办法: 将format.setTrimText(false); 即可.因为 createPrettyPrint()方法中有 format.set ...