前台：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="page.css"/>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="page.js"></script>
<title></title>
</head>
<body>
<div id ="aaa" style ="width:100%;">
<table id ="table_id_one" class ="tstyle"></table>
</div>
<div id='div' style ="width:100%;">
<div class ="box" val ="1">首页</div>
<div class ="sbox" val ="1">首页</div>
<div class ="sbox" val ="1">上一页</div>
<div class ="box" val ="1">上一页</div>
<div id ="pagema">
</div>
<div class ="sbox" val ="4">末页</div>
<div class ="box" val ="4">末页</div>
<div class ="sbox" val ="1">下一页</div>
<div class ="box" val ="1">下一页</div>
<div style ="width:8%;float:left" >总行数:<div id ="title" class ="xbox"></div></div>
<div style ="width:8%;float:left" >总页数:<div id ="size" class ="xbox"></div></div>
<div id ="tiaozhuan" val ="5" style ="width:10%;float:left" >跳页:</div>
</div>
</body>
<script>
$(
chushi(2)
);
</script>
</html>
js文件：
/**
* 分页插件
* 需要传每页的条数。
* 初始调用初始函数。chushi();
* pageview(num,1)这个需要更改servlrt路径
*/
function chushi(num){
pageview(num,1);
gopage(num);
}
function pagetiao(num){
var va = $("#input_one").val();
if(va>parseInt($("#size").text())){
alert("超出最大页，请重试");
return;
}
pageview(num,va);
}
function gopage(num){
alert(parseInt($("#size").text()));
if(parseInt($("#size").text())<5){
$("div.box").hide();
var html="";
for(var i =0;i<parseInt($("#size").text());i++){
var sum = parseInt(i)+1;
html+='<div id="'+sum+'" rel ="1" class ="sbox">'+sum+'</div>';
}
$("#pagema").empty().append(html);
var b =$("div.sbox");
//var b =$("div.sbox");
b.click(function(){
if($(this).attr("val") == 1){
pageview(num,1);
b.css("background-color","#888");
$(this).css("background-color","#00FF00");
}else if($(this).attr("val") == 4){
pageview(num,parseInt($("#size").text()));
b.css("background-color","#888");
$(this).css("background-color","#00FF00");
}else if($(this).attr("val") == 5){
}
else{
if($(this).text() - $("#3").text()>=0){
pageview(num,parseInt($(this).text()));
$("#3").text($(this).text());
$("#5").text(parseInt($("#3").text())+2);
$("#4").text(parseInt($("#3").text())+1);
$("#2").text(parseInt($("#3").text())-1);
$("#1").text(parseInt($("#3").text())-2);
b.css("background-color","#888");
$(this).css("background-color","#00FF00");
if($("#4").text()-$("#size").text()>=0){
$("#3").text(parseInt($("#size").text())-1);
$("#4").text(parseInt($("#size").text()));
$("#2").text(parseInt($("#size").text())-2);
$("#1").text(parseInt($("#size").text())-3);
b.css("background-color","#888");
$(this).css("background-color","#00FF00");
}
}else {
pageview(num,parseInt($(this).text()));
b.css("background-color","#888");
$(this).css("background-color","#00FF00");
if($(this).text()-$("#1").text()==0){
if($("#1").text()<=1){
return;
}
else{
pageview(num,parseInt($(this).text()));
$("#3").text($(this).text());
$("#4").text(parseInt($("#3").text())+1);
$("#5").text(parseInt($("#3").text())+2);
$("#2").text(parseInt($("#3").text())-1);
$("#1").text(parseInt($("#3").text())-2);
b.css("background-color","#888");
$(this).css("background-color","#00FF00");
if($("#1").text()==0){
pageview(num,1);
$("#3").text(3);
$("#4").text(4);
$("#5").text(5);
$("#2").text(2);
$("#1").text(1);
b.css("background-color","#888");
$(this).css("background-color","#00FF00");
}
}
}
}
}
});
}
else{
$("div.sbox").hide();
var html2="";
for(var i =0;i<5;i++){
var sum = parseInt(i)+1;
html2+='<div id="'+sum+'" rel ="1" class ="box">'+sum+'</div>';
}
$("#pagema").empty().append(html2);
var a =$("div.box");
//var b =$("div.sbox");
a.click(function(){
if($(this).attr("val") == 1){
pageview(num,1);
a.css("background-color","#888");
$(this).css("background-color","#00FF00");
}else if($(this).attr("val") == 4){
pageview(num,parseInt($("#size").text()));
a.css("background-color","#888");
$(this).css("background-color","#00FF00");
}else if($(this).attr("val") == 5){
}
else{
if($(this).text() - $("#3").text()>=0){
pageview(num,parseInt($(this).text()));
$("#3").text($(this).text());
$("#5").text(parseInt($("#3").text())+2);
$("#4").text(parseInt($("#3").text())+1);
$("#2").text(parseInt($("#3").text())-1);
$("#1").text(parseInt($("#3").text())-2);
a.css("background-color","#888");
$("#3").css("background-color","#00FF00");
if($("#5").text()-$("#size").text()>=0){
$("#3").text(parseInt($("#size").text())-2);
$("#5").text($("#size").text());
$("#4").text(parseInt($("#size").text())-1);
$("#2").text(parseInt($("#size").text())-3);
$("#1").text(parseInt($("#size").text())-4);
a.css("background-color","#888");
$(this).css("background-color","#00FF00");
}
}else {
a.css("background-color","#888");
$(this).css("background-color","#00FF00");
pageview(num,parseInt($(this).text()));
if($(this).text()-$("#1").text()==0){
if($("#1").text()<=1){
return;
}
else{
pageview(num,parseInt($(this).text()));
$("#3").text($(this).text());
$("#4").text(parseInt($("#3").text())+1);
$("#5").text(parseInt($("#3").text())+2);
$("#2").text(parseInt($("#3").text())-1);
$("#1").text(parseInt($("#3").text())-2);
a.css("background-color","#888");
$("#3").css("background-color","#00FF00");
if($("#1").text()==0){
pageview(num,1);
$("#3").text(3);
$("#4").text(4);
$("#5").text(5);
$("#2").text(2);
$("#1").text(1);
a.css("background-color","#888");
$("#3").css("background-color","#00FF00");
}
}
}
}
}
});
}
}
function pageview(intnum,pageindex){
var html2 ='<div id ="tiaozhuan" val ="5" style ="width:100%;float:left" >跳页:<input type ="text" style ="width:30%" id ="input_one"/><input type ="button" value ="跳页" onclick ="pagetiao('+intnum+')"/></div>';
var html ='<tr>';
html +='<th class ="tdh">序号</th><th class ="tdh">标题</th>';
html +='</tr>';
var data ={
"pagetitle":pageindex,
"num":intnum
}
var url ="pages";
$.ajax({
type:"get",
url:url,
data:data,
async:false,
success:function(result){
for(i in result){
html +='<tr>';
html +='<td class ="tdh"> '+ result[i].id +'</th><td id =td_'+i+' class ="tdh">'+result[i].title+'</td>';
html +='</tr>';
$("#title").empty().append(result[i].pagetitle);
$("#size").empty().append(result[i].pagenum);
}
$("#aaa").empty().append(html);
$("#tiaozhuan").empty().append(html2);
}
});
}