日期:2014-05-16  浏览次数:20589 次

帅气的jquery tabs插件 +优雅的 ajax 分页(转)
http://www.iteye.com/topic/1113915

<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(); 
}