首先使用jquery的tabs 必须引入其相关文件
<script src="/scripts/jquery-1.5.2rc1.js" language="javascript"></script>
<script type="text/javascript" src="/scripts/Js-ui/jquery.ui.core.js"></script>
<script type="text/javascript"src="/scripts/Js-ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/scripts/Js-ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" type="text/css" href="/css/Css-Pub/ui.all.css" />
<link rel="stylesheet" type="text/css" href="/css/Css-Pub/demos.css" />
$(function() {
$("#tabs").tabs( {
fx : {
opacity : "toggle"
},
event : "click"
});
beginPage();//此函数页面加载时初始化函数
});
function beginPage() {
$.get("url保密呵呵",{method:"getCount","type":type},function(data) {
if (data != "0") {
$("#count").text(data);//显示记录总数
count=parseInt(data);
var sizes=parseInt($("#size").val());
maxpage=forDight(count/sizes);//显示页数
getData();//好戏开始,分页begin
}
})
}
function getData() {
//getJSON方法直接获取后台数据
$.getJSON("/url",{"method":"findAll","size":size,"page":page,"type":type}, function(data) {
var tempStr="";
var selectTag=$("#type").val();//获取tabs当前位置
$("tr[id='newtr']").remove();//删除上次数据
$.each(data,function(i,obj){//获取数据后回调函数内执行添加数据到表格
var name=obj["name"]==null?"不详":obj["name"];
var remark=obj["remark"]==null?"不详":obj["remark"];
var type=obj["type"];
var phone=obj['phone'];
var id=obj["id"];
tempStr+="<tr id='newtr'><td><input type='checkbox' name='delCbx' id='delCbx"+type+"' value='"+phone+"'/></td>"+
"<td><a href='javascript:openUpdateWindow("+id+");'>"+name+"</a></td>"+
"<td><a href='javascript:openUpdateWindow("+id+");'>"+phone+"</a></td>"+
"<td>"+remark+"</td></tr>"
});//将数据添加为一个字符串
$("#tab"+selectTag).after(tempStr)//显示到表格
$("#pageint").text(page+"/"+maxpage);
});
}
//当然分页还有一些用户操作的响应
function responcePage(pages){
//alert($("#size").val());
var sizes=parseInt($("#size").val());
maxpage=forDight(count/size);
if(maxpage==0&&count!=0){
maxpage=1;
}
if(pages>maxpage){
pages=maxpage;
alert("已到最大页数");
}else if(pages<1){
pages=1;
alert("已到首页");
}
if(sizes>6){
sizes=6;
pages=1;
}
page=pages;
size=sizes;
$("#goPage").val(page);
$("#size").val(size);
getData();
}
/*取整数的方法*/
function forDight(Dight)
{
Dight = Math.ceil(Dight*Math.pow(10,0))/Math.pow(10,0);
return Dight;
}
//单击事件
function clickTabs(i){
$('#type').val(i);
type=i;
page=1;
size=4;
if(type==1){
$("#delCbx1").removeAttr("checked");
}else{
$("#delCbx2").removeAttr("checked");
}
beginPage();
}
//下面贴出html里面的重要代码
<form action="url哈哈" method="post" name="bwForm">
<input name="type" value="1" id="type" type="hidden"/>
<input name="method" value="doDelete" type="hidden"/>
<div class="demo-description" style="width: 630px; height: 350px;">
<div id="tabs" style="width: 630px; border-color: orange; height: 300px;">
<ul>
<li>
<a href="#tabs-1" onClick="clickTabs(1)">黑名单管理</a>
</li>
<li>
<a href="#tabs-2" onclick="clickTabs(2)">白名单管理</a>
</li>
</ul>
<div id="tabs-1" style="height: 320px;">
<table width="100%" border="0" cellpadding="0"
cellspacing="1" bgcolor="#CCCCCC" class="table01" >
<tr id="tab1">
<th width="11%" bgcolor="#FFFFFF" scope="col">
<a href="javascript:doDelete()" >删除</a>
</th>
<th width="29%" bgcolor="#FFFFFF" scope="col">
姓名
</th>
<th width="34%" bgcolor="#FFFFFF" scope="col">
号码
</th>
<th width="25%" bgcolor="#FFFFFF" scope="col">
备注
</th>
</tr>
</table>
</div>
<div id="tabs-2" style="height:320px;">
<table width="100%" border="0" cellpadding="0"
cellspacing="1" bgcolor="#CCCCCC" class="table01" >
<tr id="tab2">
<th width="12%" bgcolor="#FFFFFF" scope="col">
<a href="javascript:doDelete()" >删除</a>
</th>
<th width="29%" bgcolor="#FFFFFF" scope="col">
姓名
</th>
<th width="34%" bgcolor="#FFFFFF" scope="col">
号码
</th>
<th width="25%" bgcolor="#FFFFFF" scope="col">
备注
</th>
</tr>
</table>
</div>
</div>
<div id="page">
第<span id="pageint"></span>页
<a href="javascript:responcePage(1)">首页</a>|
<a href="javascript:responcePage(page-1)" >上一页</a>|
<a href="javascript:responcePage(page+1)">下一页</a>|
<a href="javascript:responcePage(maxpage)">尾页</a>|| 每页显示
<input type="text" size="3" maxlength="3" id="size" name="size" value="4" onBlur="if(this.value==''){this.value=4}"
onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"/>
条 跳转到第
<input type="text" size="3" maxlength="3" name="goPage" id="goPage"
onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" onBlur="responcePage(this.value)"/>页 共
<span class="orange" id="count">3</span> 条记录
</div>
</div>
</form>
分享到:
相关推荐
jquerytabs jquery选项卡 jquery tabs
基于jquery tabs切换源码,demo实现了不同的切换方式,代码精简值得参考
jQuery tabs 纵向显示,jQuery tabs vertical,jQuery tabs
秋天 jQuery tabs 插件是基于jQuery框架完成的标签切换示例,您可以通过修改在自己的WEB网页中使用。 调用方法 网页案例样式
jQuery代码只有几行,非常易懂,效果很好。
jQuery Tabs插件 PWS Tabs 演示地址:http://www.jq22.com/plugin/1752
jQuery Tabs
jQuery Tabs插件EasyTabs.js 演示地址:http://www.jq22.com/plugin/259
jquery tabs
jquery 的 Tabs 插件,很不错,值得下载哈!
jquery实现的tab选项卡。非常简单。
可动态添加tabs可实现jquery换肤
我写的tabs插件,基于jquery和boostrap 20140301: 暂等待修复保存个人默认标签
jQuery Tabs插件 (选项卡插件) --推荐 .效果不错,使用简单的选项卡插件
自动切换模式Tab选项卡 - Rotating jQuery tabs
jQueryTab是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件,使用简单,采用响应式设计,并支持多种CSS3动画过渡效果。
CardTabs是一款简单的jquery Tabs选项卡插件。该jquery Tabs选项卡插件可以自定义主题,兼容IE8浏览器,而且使用简单,非常实用。
jQuery UI Tabs Paging 是一个用来对太多的 Tab 进行分页显示的 jQuery 插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片...
带CSS3过渡动画效果的jQuery Tabs选项卡插件