帅气的jquery tabs插件 +优雅的 ajax 分页

首先使用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) {
//get方法向后台获取记录的大小判断
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();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值