<!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. jenkins启动appium服务

    想在jenkins中,自动定时启动appium服务,shell命令已准备如下: BUILD_ID=dontKillMe echo "" > appium.log nohup ...

  2. 主流磁盘接口比较(SATA/SCSI/SAS/FC)[转]

    数据越来越多,用户对存储容量的要求是越来越高.作为数据存储最基本的介质——硬盘,其种类也越来越多.面对市场上纷繁复杂的硬盘,用户又该如何选择呢?本文就对SATA.FC.SAS三种硬盘进行了比较,希望能 ...

  3. html与表格（table）相关的属性

    <table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定义表格行,th 元素定义表头,td 元素定义 ...

  4. 微信小程序 weui 使用方法

      https://github.com/Tencent/weui-wxss/ 下载地址用于小程序的https://github.com/Tencent/weui   下载地址用于H5    运用示例 ...

  5. 修复 dji spark 的 micro sd/tf 存储卡里不能正常播放的视频文件

    可能是因为 1.在没有正确的操作停止录像前,关掉了 spark 的电源 2.在 spark 没有完成视频存储前,关掉了 spark 的电源 总之在电脑里想查看存储卡里的视频时,发现居然无法播放,这就太 ...

  6. OpenGL学习脚印：深度測试(depth testing)

    写在前面 上一节我们使用AssImp载入了3d模型,效果已经令人激动了.可是绘制效率和场景真实感还存在不足,接下来我们还是要保持耐心,继续学习一些高级主题,等学完后面的高级主题,我们再次来改进我们载入 ...

  7. [LintCode] Find the Connected Component in the Undirected Graph

    Find the Connected Component in the Undirected Graph Find the number connected component in the undi ...

  8. 读取JPG图片的Exif属性（一） - Exif信息简介

    https://blog.csdn.net/fioletfly/article/details/53605959 https://blog.csdn.net/a_big_pig/article/det ...

  9. HTML5学习笔记（八）：CSS定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠.定位的基本思想很简单 ...

  10. [Windows Azure] Enabling Diagnostics in Windows Azure

    Enabling Diagnostics in Windows Azure Windows Azure Diagnostics enables you to collect diagnostic da ...