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