php+ajax+jquery插件实现分页

最新推荐文章于 2021-03-10 07:29:55 发布

eric414664593

最新推荐文章于 2021-03-10 07:29:55 发布

阅读量549

点赞数

本文链接：https://blog.csdn.net/eric414664593/article/details/26054201

版权

首先需要下一个叫Jpaginate的基于jquery的插件，在项目中导入jquery。

然后设置一下Jpaginate代码如下

var pageSize=6;
$(function(){
$("#pagination0").paginate({
count     : count, //分页的总页数
start     : 1, //起始地页数     
display     : 6,//每页显示的数据个数      
border          : false,  
text_color        : '#888', 
background_color      : '#EEE', 
text_hover_color      : 'black',  
background_hover_color  : '#CFCFCF',
rotate            : true,   
images          : false,  
mouse         : 'press',  
onChange          : function(page){//唯一的一个事件当点击时触发
location.href = "#" + page;//返回页数
document.getElementById( 'pagination1').innerHTML= " ";//清楚页面以前的内容
list(page-1,pageSize);

}
});
list(0,pageSize);
});

function list(start, size){//上面所调用的list函数，通过ajax向pages也发送页数并返回json数据进行处理
$.ajax({
url:"pages.php",
type:"post",
data:{start:start,size:size},
dataType:"json",
async:false,
error: function(){alert('请求超时，请稍候再试');},
success: function(result){
$.getScript("jquery-ui/js/index.js");
var s = $('#pagination1');
var obj=eval(result.classcontext);
for(var i=0;i<obj.length;i++){
if(obj[i].flag==true){
s.append("<table><tr><td class='td_01'><img class='fm' src='images/fm.jpg' /></td><td class='td_02'><div><span class='text01'>"+obj[i].title+"</span></div><p class='text02'>"+obj[i].teacher+" | "+obj[i].date+" "+obj[i].startdate+"~"+obj[i].enddate+" | "+obj[i].site+"</p><p><b>培训对象：</b>"+obj[i].object+"</p><p><b>课程简介："+obj[i].text+"</b></p></td><td class='td_03'><p><span class='number'>"+obj[i].count+" </span>人已报名</p><input type='hidden' name='title' value='"+obj[i].title+"'/><input class='bt01' type='button' value='我要报名' name='join' id='"+i+"'οnclick='onclickEvt(this)'/></td></tr></table>");
}
else{
s.append("<table><tr><td class='td_01'><img class='fm' src='images/fm.jpg' /></td><td class='td_02'><div><span class='text01'>"+obj[i].title+"</span></div><p class='text02'>"+obj[i].teacher+" | "+obj[i].date+" "+obj[i].startdate+"~"+obj[i].enddate+" | "+obj[i].site+"</p><p><b>培训对象：</b>"+obj[i].object+"</p><p><b>课程简介："+obj[i].text+"</b></p></td><td class='td_03'><p><span class='number'>"+obj[i].count+" </span>人已报名</p><input type='hidden' name='title' value='"+obj[i].title+"'/></td></tr></table>");

}
}
$("#mytbody").html(s.toString());

}
});
}

HTML中的代码片段

div id="pagination1"></div>
 <div id="pagination0" style="margin-left: 400px;"><a href='#' onclik=\"javascript:modify('value.ID')"></a></div>

处理数据的php代码

<?php 
/**
* 
*/
error_reporting(E_ALL & ~E_DEPRECATED);
include "conn.php";
$flag=True;
$pagesize=6;
$page = $_POST['start'];  
$offset=$page*$pagesize;  
 $temp=Array(); 
 $i=0;
$result=mysql_query("SELECT * FROM classcontext ORDER BY id DESC LIMIT $offset,$pagesize");
while ($arr=mysql_fetch_array($result)) {
	# code...
	$endDates=strtotime(date("Y-m-d",$arr['date']).date("H:i",$arr['enddate']));
	if(strtotime(date("Y-m-d H:i"))<=$endDates){
			$flag=True;
		}
		else {$flag=FALSE;}
	$peopleCount=mysql_query("SELECT * FROM attendpeople WHERE title='$arr[title]'");
	$count=mysql_num_rows($peopleCount);
	$list = array('site' =>$arr['site'] ,'teacher' =>$arr['teacher'] ,'startdate' =>date("H:i",$arr['startdate']) ,'date' =>date("Y/m/d",$arr['date']),'enddate' =>date("H:i",$arr['enddate']),'object' =>$arr['object'] ,'title' =>$arr['title'] ,'text' =>$arr['text'], 'count'=>$count,'flag'=>$flag );
	$temp[$i]=$list;
	$i++;
}
echo json_encode(Array('classcontext'=>$temp));
?>

大体上就是通过ajax发送页数到pages.php页面，处理数据返回页面的json数据，然后通过append把信息展现到html页面