页面分页

最新推荐文章于 2024-07-19 15:13:24 发布
南宫瑾
最新推荐文章于 2024-07-19 15:13:24 发布
阅读量121
点赞数
分类专栏： c，html 文章标签： javascript html ViewUI
c，html 专栏收录该内容
5 篇文章 0 订阅
订阅专栏



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>NodeManager</title>
<link rel="stylesheet" href="/nd/css/style.css" type="text/css" media="all" />
<script type="text/javascript" src="/nd/js/jquery.min.js"></script>
<link rel="stylesheet" href="/nd/css/easydropdown.css" type="text/css" media="all" />	
<script type="text/javascript" src="/nd/js/base.js"></script>
<script type="text/javascript" src="/nd/js/bindpage.js"></script>
<script type="text/javascript" src="/nd/js/jquery.tmpl.js"></script>	
<script type="text/javascript" src="/nd/js/jquery.datepick.js"></script>
<script type="text/javascript" src="/nd/js/jquery.easydropdown.js"></script>
<link rel="stylesheet" href="/nd/css/jquery.datepick.css" type="text/css" media="all" />	
<script id="UserListTmp" type="text/x-jquery-tmpl">
	<tr data-grid="${id}">
	<td style="text-align:center"><input type="checkbox" name="" id="${id}" /></td>
	<td style="text-align:center">${index}</td>
	<td style="text-align:center">${account}</td>
	<td style="text-align:center">${name}</td>
	<td >${role}</td>
</tr>
</script>	
</head>

<body>

<script type="text/javascript">
//验证正则
var usernamecheck = /^[a-zA-Z0-9_.-]+[a-zA-Z0-9_.-]$/;
var emailcheck = /^([a-zA-Z0-9_\.\-])+@(([a-zA-Z0-9_\-])+\.)+([a-zA-Z0-9])+$/;
var phonecheck = /^0{0,1}(13[0-9]|15[0-9]|18[0-9])[0-9]{8}$/;
var xmcheck = /^[_\n\w\u4e00-\u9fa5]+$/;
var userList={
   "total":3,
   "start":0,
   "row":3,
    "data":
    [
    {
      "id":299,
      "account":"Configuration",
      "name":"配置管理员",
      "role":1,
      "lang":0,"state":0
    }，
    {"id":302,
     "account":"wj",
     "name":"审计管理员",
     "role":2,
     "lang":0,
     "state":0
    }
    ]
}
$("#UserList tr:first>td:eq(1)").click();//默认列表第一条选中

var pager={
	recordcount:0,
	recordperpage:10,
	startrecord:0,

	pagecount:0,
	currentpage:0,
	url:document.location,
	id:"#Pages",

	init:function(id,purl,precordcount,pstartrecord,precordperpage){
		this.url=purl;
		this.recordcount=precordcount;
		this.startrecord = pstartrecord;
		this.recordperpage=precordperpage;
		this.id = id;
		return this;
	},

	bind:function(){
			this.pagecount = Math.floor( (this.recordcount + this.recordperpage -1) / this.recordperpage);	
			this.currentpage = Math.floor( (this.startrecord + this.recordperpage -1) / this.recordperpage);
			var dispaly_startpage = (this.currentpage>1&&this.pagecount>3?this.currentpage-1 :1);
			var dispaly_endpage = (this.currentpage==this.pagecount ? this.pagecount : this.currentpage+1);

			var prepagedom = $('>a:first',this.id);
			var nextpagedom =$('>a:last',this.id);

			if(this.pagecount <= 3){
				prepagedom.hide();
				nextpagedom.hide();
			}else{
				prepagedom.show();
				nextpagedom.show();
			}

			if(this.recordcount > 0){
				if(this.pagecount != 4){
					for(i=dispaly_startpage;i<=dispaly_endpage;i++){
						nextpagedom.before(' [url=javascript:;]' + i + '[/url] ');
					}
				}else{
					for(i=1;i<=4;i++){
						nextpagedom.before(' [url=javascript:;]' + i + '[/url] ');
					}
				}
			}else{
				i=1;
				nextpagedom.before('[url=javascript:;]' + i + '[/url] ');

			}
			//8-8灏�
			if(this.pagecount == 3&&dispaly_endpage<this.pagecount){
				nextpagedom.before('[url=javascript:;]'+this.pagecount+'[/url] ');
			}else if(this.pagecount == 4&&dispaly_endpage<this.pagecount){
				nextpagedom.before('');
			}else if(this.pagecount>dispaly_endpage){
				if(this.pagecount - dispaly_endpage > 1){
					nextpagedom.before('<span>...</span>[url=javascript:;]'+this.pagecount+'[/url]');
				}else{
					nextpagedom.before('[url=javascript:;]'+this.pagecount+'[/url] ');
				}
			}
			//8-8灏圭粨鏉�

			if(this.currentpage==3 && this.pagecount>4){
				prepagedom.after(' [url=javascript:;]1[/url]');
			}else if(this.currentpage>3 && this.pagecount>4){
				prepagedom.after(' [url=javascript:;]1[/url]<span>...</span>');
			}

			//
			if($("#pageinfospansec").length>0){
				$("#pageinfospan").hide();//椤电爜淇℃伅
			}

			if(this.currentpage==1){
			 	//prepagedom.addClass("grly") .removeClass("btnbox");
			}else{
				//prepagedom.removeClass("grly") .addClass("btnbox");
				//prepagedom.attr("href",this.url+dispaly_startpage);
				prepagedom.click(function(){getPage(dispaly_startpage)})
			}

			if(this.currentpage == this.pagecount){
				//nextpagedom.addClass("grly") .removeClass("btnbox");
			}else{
				//nextpagedom.removeClass("grly") .addClass("btnbox");
				//nextpagedom.attr("href",this.url+dispaly_endpage);
				nextpagedom.click(function(){getPage(dispaly_endpage)})
			}


			$('input:text','div.fenyelistbox').bind('keydown', function(e){
   				 Digit(this, e);
			});
			$('input:text','div.fenyelistbox').bind('mousedown', function(e){
				WitchInput(this,e);
			});

			var jumpbtn = $('input.btn','div.fenyelistbox');
			var btnurl=this.url;
			var zongpage=this.pagecount;
			var numcheck = /^\d+$/;
			jumpbtn.click(function(){
				var jumpnum=$('input:text','div.fenyelistbox').val();
				if(jumpnum>zongpage){jumpnum=zongpage}
				if(jumpnum=="0"){jumpnum=1}
				if(!numcheck.test(jumpnum)){$('input:text','div.fenyelistbox').val("");return false};
				switch(jumpnum){
					case "":
						return false;
						break;
				}
				location.href =btnurl + parseInt(jumpnum,10);
				});

			var spantext="鍏�"+this.recordcount+"鏉＄鍚堟潯浠讹紝姣忛〉"+this.recordperpage+"鏉�"
			$("#pageinfospan").text(spantext);
			//7-29鏂板姞缁撴潫			
			return this;
	}
}

$.ajaxSetup({
            cache: false //鍏抽棴AJAX鐩稿簲鐨勭紦瀛�   
        });


//取值
function HTMLEncode(str){
	var newStr = "";
	if(!str){
		return "";
	}
	//newStr = str.replace(/\\/g,"\\").replace(/\"/g,"\"").replace(/\'/g,"\'").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/ /g, " ").replace(/\n/g,"<br>");
	newStr = str.replace(/\\/g,"").replace(/\"/g,"").replace(/\'/g,"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/ /g, " ").replace(/\n/g,"<br>");
	return newStr;
}

function getUserList(){
	$("#UserName1").show();
	$("#UserName").hide();
	$("#Pages").empty().html('[url=javascript:;]<i class="icon-prev"></i>[/url][url=javascript:;]<i class="icon-next"></i>[/url]');
	$("#UserList").empty();

	$.each(userList.data,function(i,item){
		item.index = userList.start + i + 1;

		var txt = "";
		if(item.role == 0){
			txt = "用户管理员";
		}else if(item.role == 1){
			txt = "配置管理员";
		}else{
			txt = "审计管理员";
		}
		item.role = txt;		
	});

	$("#UserListTmp").tmpl(userList.data).appendTo("#UserList");

	$("#UserList tr").each(function(){
		var userid = $(this).data("grid");
		var $tr = $(this);
		$(">td",this).not(":first").on("click",function(){
			getUserInfo(userid);
			$tr.addClass("tron").siblings().removeClass("tron");
		});
	});

	pager.init("#Pages","?page=",userList.total,userList.start+1,userList.row).bind();
	//	pager.init("#Pages","?guolv_account='+$('#guolv_account').val()+'&guolv_caoz='+('#guolv_caoz').val()+'&guolv_select'+('#guolv_select').val()+'page=",userList.total,userList.start+1,userList.row).bind();
}

    <div class="user-list">
    	<table cellpadding="0" cellspacing="0" border="0" id="User_List" class="tabcont">
        	<thead>
            	<tr><th width="20"><input onChange="checkAll('#UserList',this)" type="checkbox" name="" /></th>
                	<th width="32">序号</th>
                	<th style="text-align:center">帐号</th>
                	<th width="172" style="text-align:center">姓名</th>
                	<th width="96">角色</th>
                </tr>
            </thead>

            <tbody  id="UserList">              
            </tbody>
        </table>


		<div class="tab-foot">
			<!---->
            <div class="ctrl">
                [url=javascript:;]<i class="icon-plus"></i>添加[/url]
                [url=javascript:;]<i class="icon-mins"></i>删除[/url]
            </div>

            <!---->
            <div class="pages" id="Pages">
                [url=javascript:;]<i class="icon-prev"></i>[/url]
                [url=javascript:;]<i class="icon-next"></i>[/url] 
            </div>
		</div>	
    </div>

</body>
</html>
南宫瑾
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面分页

[code="java"]NodeManager ${index} ${account} ${name} ${role} //验证正则var usernamecheck = /^[a-zA-Z0-9_.-]+[a-zA-Z0-9_.-]$/;var emai...
复制链接

扫一扫