jQuery.page 分页控件
分享一下自己在项目中引用的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 分页控件的更多相关文章
- jquery.bootpag分页控件
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src=& ...
- MVC Page分页控件
MVCPage帮助类 控制器代码 public ActionResult Article(int? page) { //Session["ArticleClass"] = cont ...
- 基于jquery扩展漂亮的分页控件（ajax）
分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等 ...
- ajax 分页控件，基于jquery
/* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...
- 自己写的简单的jQuery分页控件
因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过Jquery控件,硬着头皮找了些资料,写了这个分页控件,目 ...
- jQuery Pagination Plugin ajax分页控件
<html> <body> <div id="datagrid"> </div> <div id="paginati ...
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
- jquery 分页控件1
jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...
- 基于avalon+jquery做的bootstrap分页控件
刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...
随机推荐
- vertx读取配置文件,获得端口号
1:在src/conf目录下创建conf.json { } 2:创建Verticle, config().getInteger("http.port", 8080),将会读取配置文 ...
- Centos expect spawn、linux expect 用法
使用expect实现自动登录的脚本,网上有很多,可是都没有一个明白的说明,初学者一般都是照抄.收藏.可是为什么要这么写却不知其然.本文用一个最短的例子说明脚本的原理. 脚本代码如下: ###### ...
- boost--smart_ptr库
C++没有类似Java.C#等语言的垃圾回收机制,内存管理是最为头痛的工作. new.delete以及指针的不恰当运用是C++中造成资源获取/释放问题的根源. 智能指针是解决这些问题的一种方案,boo ...
- memcache图形管理工具
http://www.junopen.com/memadmin/其中有使用截图和介绍 https://github.com/junstor/memadmin 下载地址
- Linux中顿号
``的作用是运行``之间的命令,并且将命令运行的结果返回.一般shell脚本应该是这样:result=`ls -l` (用你的命令替换ls -l,这里只是举例)这样,result就有``里面的运行结果 ...
- Jackson基础
一.所需jar包: jackson-core-x.x.x-rc4.jar.jackson-databind-x.x.x-rc4.jar.jackson-annotations-x.x.x-rc4.ja ...
- linux基础命令---du
du 以块为单位,显示当前目录下,所有目录.文件.子目录的磁盘使用情况.总结每个文件的磁盘使用情况,对目录进行递归处理 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE. ...
- php 获取随机数的几个方式
php 获取随机数的几个方式 1.直接获取从min-max的数,例如1-20:$randnum = mt_rand(1, 20); 2.在一个数组里面随机选择一个(验证码的时候需要字母.数字混合的情况 ...
- 比特币、莱特币钱包下载和把数据迁移到C盘以外其他盘
比特币是目前最热门和价格最高的虚拟币,国内外多个平台可以进行交易,有些商家可以用比特币进行支付有些国家可以在ATM取款. Bitcoin-Qt就是最早的比特币客户端,构建了比特币的骨干网络,具有高度的 ...
- java多线程----Semaphore信号量
import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...