转jquery tabs

最新推荐文章于 2020-07-13 16:30:53 发布

原创最新推荐文章于 2020-07-13 16:30:53 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #ViewUI

jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何利用jQuery的Tabs插件实现动态分页功能，包括引入必要文件、初始化页面、获取数据并填充到表格中等关键步骤。

首先使用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>