PHP + jQuery ajax分页自己改的

最新推荐文章于 2021-03-27 13:53:31 发布

亮子zl

最新推荐文章于 2021-03-27 13:53:31 发布

阅读量579

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhaoliang831214/article/details/41244587

***********PHP 数据层****************
$result = mysql_query("select id from rpt_searchapp_union_daily ".$sqlwhere."");
$total = mysql_num_rows($result);//总记录数

$pageSize = 25; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数

$startPage = $page*$pageSize;
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
//
//判断是否同一个。一天内的数据按照”新增用户”降序排列 “否” 多天之间的数据按照“日期”由近及远进行排列。CONCAT(round(round(retain3_confirm,2)*100,0),'%')

$sqlstr="select day,channel,newuser, provience_confirm, provience_userconfirm from rpt_searchapp_union_daily ".$sqlwhere." order by --newuser desc limit $startPage,$pageSize";


$query= mysql_query($sqlstr);

while($v= mysql_fetch_array($query,MYSQL_ASSOC)){

$arr['list'][] = array(
'day' => $v['day'],
'channel' => $v['channel'],
'newuser'=>$v['newuser'],
'provience_confirm'=>$v['provience_confirm'],
'provience_userconfirm'=>$v['provience_userconfirm'],
);
}

$jsonstr = json_encode($arr);
echo $jsonstr;

***********END PHP 数据层 END****************

***************************************************************************************************************************************************************************************************

*********** PHP 前台 ****************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>联盟渠道确认新增（省）</title>

<link href="css/iframeStyle.css" rel="stylesheet" type="text/css" />
<link href="css/comStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="calendar/WdatePicker.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

</head>

<body >
<div class="iframePageCon">
<div class="position">
<a href="#" class="firstA">home</a>><a href="#">数据中心</a>

</div>
<div class="datacontainer contrastTable">
<div class="search">

<table>
<tbody><tr>
<td> 日期：<input type="text" name="firstDay" id="textBeginTime" onclick="WdatePicker({dateFmt:'yyyyMMdd'})" class="Wdate InputCom" value="<?php echo date("Ymd",strtotime(date("Ymd").'-'.'4'.'day'));?>"> </td>
<td>至 <input type="text" name="today" onclick="WdatePicker({dateFmt:'yyyyMMdd'})" class="Wdate InputCom" id="textEndTime" value="<?php echo date("Ymd",strtotime(date("Ymd").'-'.'4'.'day'));?>"></td>
<td>渠道名称:<input type="text" id="channel_name" name="channel_name"></td>
<td><input name="submit" type="button" id="b_clikc" class="subCom" value="查询"></td>
<td>
<form action="s_union_dailyProvince_data_AAA.php" method="post">
<input type="submit" id="b_submit" value="导出"></input><input type="hidden" name="Fy" value="1"></input>
<input type="hidden" name="BeginTime" id="BeginTime"/>
<input type="hidden" name="EndTime" id="EndTime"/>
<input type="hidden" name="Channel_name" id="Channel_name_s"/>
</form>
</td>
</tr>
</tbody></table>
<div class="tableTitle"><h2>联盟渠道确认新增（省）</h2></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dataTable" id="dataTable">
<tbody ><tr class="titleTr">
<th><strong>日期</strong></th>
<th><strong>渠道ID</strong></th>
<th ><strong>新增用户</strong></th>
<th ><strong>省确认比例</strong></th>
<th ><strong>省确认新增</strong></th>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div id="pagecount" style=" padding-left: 1200px; font-size: 14px;"></div>
</div><div style="position: absolute; z-index: 100004; display: none; top: 83px; left: 219.765625px;" lang="zh-cn"><iframe hidefocus="true" width="9" height="7" frameborder="0" border="0" scrolling="no" src="about:blank" style="width: 186px; height: 198px;"></iframe></div></body>
</html>

<script type="text/javascript">
var curPage = 1; //当前页码
var total,pageSize,totalPage;
var page_s=1;
//获取数据
function getData(page){

var textbeginTime=$("#textBeginTime").val();
var textendTime=$("#textEndTime").val();
//var channel_id=$("#channel_id").val();
var channel_name=$("#channel_name").val();
$.ajax({
type: "post",
url: "s_union_dailyProvince_data_AAA.php",
data: {"BeginTime":textbeginTime,"EndTime":textendTime,"Channel_name":channel_name,"Channel_id":null,'pageNum':page-1},
dataType:"json",
beforeSend:function(){
$('#pagecount').append("<div style='top:35%; left:35%;width:500px; height:300px; z-index:1002; overflow:auto; color=red;'>数据加载中。。。</div>");
},
success: function(datas){
$('#dataTable tbody #tr_s').remove();
$("#dataTable tbody #tr_s").empty();//清空数据区
total = datas.total; //总记录数

pageSize = datas.pageSize; //每页显示条数
curPage = page; //当前页
totalPage = datas.totalPage; //总页数
var list = datas.list;
for(var i =0 ; i<list.length; i++){
var tdstr = '';

for(var pro in list[i] ){
tdstr += '<td>'+list[i][pro] +'</td>';
}
var trstr = '<tr id="tr_s">'+tdstr+'</tr>';
$("#dataTable tbody").append(trstr);
//getPageBar();
}
},
complete:function(){ //生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});

}
///

$(function(){
///////

getData(1);
$("#pagecount span a").live('click',function(){
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
var textbeginTime=$("#textBeginTime").val();
var textendTime=$("#textEndTime").val();
//var channel_id=$("#channel_id").val();
var channel_name=$("#channel_name").val();

$.ajax({
type: "post",
url: "s_union_dailyProvince_data_AAA.php",
data: {"BeginTime":textbeginTime,"EndTime":textendTime,"Channel_name":channel_name,"pageNum":rel-1},
dataType:"json",
success: function(datas){
$('#dataTable tbody #tr_s').remove();
$("#dataTable tbody #tr_s").empty();//清空数据区
total = datas.total; //总记录数
pageSize = datas.pageSize; //每页显示条数
totalPage = datas.totalPage; //总页数
var list = datas.list;
for(var i =0 ; i<list.length; i++){
var tdstr = '';
for(var pro in list[i] ){

tdstr += '<td>'+list[i][pro] +'</td>';

}
var trstr = '<tr id="tr_s">'+tdstr+'</tr>';
$("#dataTable tbody").append(trstr);
// getPageBar();
}
},
complete:function(){ //生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});
});
///////
$("#b_clikc").click(function(){
getData(1);
var textbeginTime=$("#textBeginTime").val();
var textendTime=$("#textEndTime").val();
//var channel_id=$("#channel_id").val();
var channel_name=$("#channel_name").val();

$.ajax({
type: "post",
url: "s_union_dailyProvince_data_AAA.php",
data: {"BeginTime":textbeginTime,"EndTime":textendTime,"Channel_name":channel_name,'pageNum':page_s-1},
dataType:"json",
success: function(datas){
$('#dataTable tbody #tr_s').remove();
$('#dataTable tbody #tr_s').remove();
//alert(datas);
total = datas.total; //总记录数
if(datas.total===0){
$("#pagecount").empty();
$("#pagecount").append("<div>没有数据。。。</div>");
}
pageSize = datas.pageSize; //每页显示条数
// curPage = page; //当前页
totalPage = datas.totalPage; //总页数
var list = datas.list;

for(var i =0 ; i<list.length; i++){
var tdstr = '';

for(var pro in list[i] ){

tdstr += '<td>'+list[i][pro] +'</td>';

}
var trstr = '<tr id="tr_s">'+tdstr+'</tr>';

$("#dataTable tbody").append(trstr);
}
},
complete:function(){ //生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});
})

$("#b_submit").click(function(){
//alert('aas');
$("#BeginTime").val($("#textBeginTime").val());
$("#EndTime").val($("#textEndTime").val());
//$("#Channel_id_s").val($("#channel_id").val());
$("#Channel_name_s").val($("#channel_name").val());
})

})
//获取分页条
function getPageBar(){
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr = "<span>共"+total+"条</span>  <span>"+curPage+"/"+totalPage+"</span>  ";

//如果是第一页
if(curPage==1){
pageStr += "<span>首页</span>  <span>上一页</span>  ";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span>  <span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>  ";
}

//如果是最后页
if(curPage>=totalPage){
pageStr += "<span>下一页</span>  <span>尾页</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span>  <span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
}
$("#pagecount").html(pageStr);
}
</script>
***********END PHP 前台 END****************