【原创】jquery-多tab标签下实现无刷新分页
要实现的效果如下图所示：
每个TAB下都可以进行分页，要求不刷新当前页面
分2大部分：1 页面html、juqery；2 php文件部分
HTML页面部分
<div class="tab" id="tabs"> <ul class="tabhd clearfix" id="statuslist"> <li class=""><a href="#tabs">全部问题</a></li> <li><a href="#tabs-0">未处理</a></li> <li><a href="#tabs-1">等你回复</a></li> <li><a href="#tabs-2">处理中</a></li> <li class="on"><a href="#tabs-3">已结束</a></li> </ul> <ul class="tablist" id="tablist"> <li class="dis" style="display: none;"> <dl class="clearfix"> <dt> <ul class="clearfix"> <li class="gamename">游戏名称</li> <li class="subtitle">问题标题</li> <li class="subtime">提问时间</li> <li class="state">问题状态</li> </ul> </dt> <div id="contentall"></div> //注意这里 </dl> <div id="pagerall"></div> //注意这里
</li> <!--调数据库中该用户未处理的问题列表--> <li style="display: none;"> <dl class="clearfix"> <dt> <ul class="clearfix"> <li class="gamename">游戏名称</li> <li class="subtitle">问题标题</li> <li class="subtime">提问时间</li> <li class="state">问题状态</li> </ul> </dt> <div id="content0"></div>
</dl> <div id="pager0"></div> //注意这里
</li>
注意红色标出；取出的数据往这个地方填充！
{ pager: 1, count: 30, status: 99 } count 是每页多少条记录
<script type="text/javascript">
//必须是页面加载的时候执行，否则页面是空的
$(document).ready(function(){
//tab标签+分页
$.getJSON("/cservice/processlist/",{ pager: 1, count: 30, status: 99 },function(json){
if(json[1] == ''){
$("#contentall").html("<div>没有数据</div>");
}else {
$("#contentall").html(json[1]);
$("#pagerall").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick });
}
});
$.getJSON("/cservice/processlist/",{ pager: 1, count: 30, status: 0 },function(json){
if(json[1] == ''){
$("#content0").html("<div>没有数据</div>");
}else {
$("#content0").html(json[1]);
$("#pager0").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick0 });
}
});
$.getJSON("/cservice/processlist/",{ pager: 1, count: 30, status: 1 },function(json){
if(json[1] == ''){
$("#content1").html("<div>没有数据</div>");
}else {
$("#content1").html(json[1]);
$("#pager1").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick1 });
}
});
$.getJSON("/cservice/processlist/",{ pager: 1, count: 30, status: 2 },function(json){
if(json[1] == ''){
$("#content2").html("<div>没有数据</div>");
}else {
$("#content2").html(json[1]);
$("#pager2").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick2 });
}
});
$.getJSON("/cservice/processlist/",{ pager: 1, count: 30 , status : 3},function(json){
if(json[1] == ''){
$("#content3").html("<div>没有数据</div>");
}else {
$("#content3").html(json[1]);
$("#pager3").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick3 });
}
});
});
//+++++全部+++++
PageClick = function(pageclickednumber){
TestClick(pageclickednumber);
}
function TestClick(pageclickednumber){
$.getJSON("/cservice/processlist/",{ pager: pageclickednumber, count: 30, status: 99 },function(json){
$("#contentall").html(json[1]);
$("#pagerall").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick });
});
}
//+++++未处理+++++
PageClick0 = function(pageclickednumber){
TestClick0(pageclickednumber);
}
function TestClick0(pageclickednumber){
$.getJSON("/cservice/processlist/",{ pager: pageclickednumber, count: 30, status: 0 },function(json){
$("#content0").html(json[1]);
$("#pager0").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick0 });
});
}
//+++++等待回复+++++
PageClick1 = function(pageclickednumber){
TestClick1(pageclickednumber);
}
function TestClick1(pageclickednumber){
$.getJSON("/cservice/processlist/",{ pager: pageclickednumber, count: 30, status: 1 },function(json){
$("#content1").html(json[1]);
$("#pager1").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick1 });
});
}
//+++++处理中+++++
PageClick2 = function(pageclickednumber){
TestClick2(pageclickednumber);
}
function TestClick2(pageclickednumber){
$.getJSON("/cservice/processlist/",{ pager: pageclickednumber, count: 30 , status: 2 },function(json){
$("#content2").html(json[1]);
$("#pager2").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick2 });
});
}
//+++++已结束+++++
PageClick3 = function(pageclickednumber){
TestClick3(pageclickednumber);
}
function TestClick3(pageclickednumber){
$.getJSON("/cservice/processlist/",{ pager: pageclickednumber, count: 30, status: 3 },function(json){
$("#content3").html(json[1]);
$("#pager3").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick3 });
});
}
</script>
2 php部分
/** * AJAX 请求TAB+无刷新分页 * @author wangjiafang ([email protected]) * @since 20130201 */ public static function GetPager($uid, $count,$pager,$status){ header("content-type:text/html;charset:utf-8"); $data = new CData(); $data->useDB('pirate_admincp'); $tableName = 'service_feedback'; if($status == 99){ $where = " AND uid = $uid "; }else { $where = " AND uid = $uid AND status = $status "; } $ret = $data->querySQL("SELECT COUNT(*) AS num FROM $tableName WHERE 1 $where "); $total = $ret[0]['num']; $ret = $data->querySQL("SELECT * FROM $tableName WHERE 1 $where ORDER BY dateline DESC limit ". ($pager-1) * $count.",".$count); $html_string = ''; foreach($ret as $k => $v){ switch ($v['game_id']) { case 1: $game_name = 'XXXX'; break; } switch ($v['status']) { case 0: $st = '未处理'; break; case 1: $st = '处理中'; break; case 2: $st = '已处理'; break; case 3: $st = '等待回复'; break; } if($v['typeid'] == 2)$v['title'] = '账号被盗装备恢复'; $date = date("Y-m-d H:i", $v['dateline']); $html_string .= "<dd class=\"clearfix\"><ul><li class=\"gamename\">$game_name</li><li class=\"subtitle\"><a href=\"/cservice/processcontent/?tid=$v[tid]&typeid=$v[typeid]\">$v[title]</a></li><li class=\"subtime\">$date</li><li class=\"state undone\">$st</li></ul></dd>"; } $num_string = ceil($total / $count); return array("0"=>$num_string, "1"=>$html_string);//这里用键值对的方式 返回JSON格式的数据，0为新闻总页数，1为拼接的HTML新闻页面 }
到这呢 基本上就OK了