<!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
顶
顶
6
踩
踩
分享到：
发表评论
-
js 判断浏览器语言 IE 谷歌 火狐....
2015-03-27 13:42 864方法1： window.navigat ... -
from 提交
2015-02-05 11:33 488<!DOCTYPE html PUBLIC ... -
checked
2015-02-03 10:20 646if($("#FTPFileRecordOp ... -
linux zip命令
2014-12-08 20:03 0linux zip命令 zip -r myfil ... -
html 点击跳转
2014-12-05 11:34 0printf(" &l ... -
html的一些笔记
2014-08-06 13:55 0style="text-decoration:non ... -
密钥管理页面的实现
2014-08-05 17:29 438实现的功能：可以实现公钥的管理 功能1：可以 ...
相关推荐
实现html静态页面分页，ul li的分页功能，实现首页，尾页，共几页，共几条，123的详细分页 的功能
自定义页面分页标签是指开发者根据项目需求，创建个性化的分页组件，以实现更加灵活、符合界面设计风格的分页功能。下面将详细探讨如何实现自定义页面分页标签及其相关的知识点。 1. **基础概念**： - 分页：将...
**Pager-taglib页面分页示例** 在Java Web开发中，数据量大的时候，分页显示是非常必要的。Pager-taglib就是一个专门用于实现页面分页功能的JSP标签库，它可以帮助开发者快速、方便地在页面上展示分页链接。本项目...
在Java编程中，页面分页是一种常见的数据处理技术，尤其在大数据量的Web应用中，为了提高用户体验，通常会将大量数据分成多个小部分（页）进行显示，而不是一次性加载所有数据。本压缩包文件提供了关于Java实现页面...
把在页面上的分页操作，在java类用一个对象封装，并且把整个分页的html标签封装在这个对象的String类型的属性里，在需要分页的地方，直接从后台取得这个对象，并把对象中的字符串用页面的内置out对象写到页面上，...
在Web开发中，静态页面的分页是一种常见的需求，它...总的来说，利用Velocity实现静态页面分页，主要涉及后端数据处理、分页模型构建、VTL模板编写和前端UI设计。通过合理规划和实施，可以创建出高效、易用的分页系统。
无刷新页面分页效果是一种常见的用户体验优化技术，它允许用户在浏览网页时无需等待整个页面重新加载即可切换页面内容，通常应用于数据量较大、需要分页显示的情况，如论坛、电商产品列表等。这种效果主要依赖于前端...
**jQuery页面分页详解** 页面分页是网页开发中常用的一种技术，特别是在处理大量数据时，为了提高用户体验，避免一次性加载过多内容导致页面卡顿。jQuery作为一种轻量级的JavaScript库，提供了简单易用的API，使得...
在本篇文章中，我们将深入探讨如何使用JavaScript实现页面分页效果，以及如何添加排序和自定义每页行数的功能。 首先，我们需要理解分页的基本原理。分页通常涉及到两个关键部分：计算总页数和根据当前页数展示对应...
以下是关于"9种jQuery纯页面分页排序"的相关知识点： 1. **JQuery排序**： jQuery提供了方便的数据排序插件，如`jquery.tablesorter`，它允许用户对表格数据进行点击列头进行升序或降序排序。`jquery.tablesorter`...
"24种页面分页样式(带css)" 提供了丰富的设计模板，旨在提升用户体验，同时也为开发者提供直接修改和应用的源码。下面我们将详细探讨这些知识点： 1. **分页设计原则**：优秀的分页设计应直观、简洁，易于理解和...
本主题将深入探讨如何在JSP中利用数据库实现页面分页，并涉及存储过程、Servlet以及Oracle和MySQL数据库的分页策略。 首先，我们要理解JSP（JavaServer Pages）是一种基于Java的动态网页技术，它可以嵌入Java代码来...
在.NET开发中，生成静态页面分页是一种常见的需求，它能提高网站的加载速度和SEO友好性。本示例程序代码将重点讲解如何在.NET环境中实现这个功能。首先，我们需要理解分页的基本概念：当数据量较大时，一次性加载...
本资源“JS+JQuery1.2.6万能页面分页源码”提供了一种使用JavaScript和jQuery 1.2.6实现的通用分页解决方案。这种分页技术的核心在于其灵活性和易用性，只需传入几个关键参数即可轻松实现。 首先，我们来了解一下...
在ASP.NET中，静态页面分页显示是一种常见的需求，它能帮助用户更高效地浏览大量数据，提升用户体验。实现这一功能的关键在于理解如何利用服务器端技术动态生成看似静态的HTML页面，同时结合分页控件和数据库查询...
本项目“一个jsp页面分页项目”着重于如何在JavaServer Pages (JSP) 中实现高效、用户友好的分页效果。 首先，我们需要理解JSP的基础知识。JSP是一种动态网页技术，允许开发者在HTML代码中嵌入Java代码，服务器端...
php写的页面分页，很基础，希望大家多下载看看
本文主要围绕"常用的页面分页技术"这一主题，结合Java编程语言，探讨如何实现分页功能。 在网页开发中，分页通常分为前端分页和后端分页两种方式。前端分页是指在浏览器端完成数据的分页显示，而后端分页则是服务器...
**jQuery静态页面分页原理与实现** 在网页开发中，分页是一种常见的用户界面设计，用于处理大量数据的展示，避免一次性加载过多内容导致页面加载慢或者用户浏览困难。jQuery库提供了一种简单且强大的方式来实现静态...
"页面分页table"这个标题暗示了我们讨论的是如何在HTML或Web应用程序中使用表格（table）来展示大量数据，并通过分页功能来有效地管理这些数据的显示。 首先，表格（Table）是HTML中的一个重要元素，用于组织和呈现...