首先需要下一个叫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页面