前端分页

转载 2015年11月17日 15:58:41
<!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" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />


<link rel="stylesheet" type="text/css" href="css/index.css">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<link type="text/css" rel="stylesheet" href="css/jquery.gritter.css" />
<title>思想品德</title>


<style type="text/css">
 body,html{ 
  width:100%; height:100%;
     overflow-x:hidden;
overflow-y:hidden; 
 }
#three{
  margin-right:-35px;
  margin-top: 7px;
 }
 #pj_jiaoshi_main .name_cxbox{
width:99.85%;
}
  #pj_jiaoshi_main{

top:10px;


}
#pj_jiaoshi_main .layout{
/* width: 104.5%; */
margin-left:-35px;
}
#pj_jiaoshi_main .name_con .neirong{
  height:120px;
  /* width:88.3%; */
line-height:1.5;

.mt10{
margin-top:5px;
}
/* #pj_jiaoshi_main .name_con .btn{
width:10%;
} */
#shanchu_btn{
width:10%;
}
#no_content{
position: absolute;
top: 150px;
bottom: 0px;
padding: 50px 30px 30px 300px;
overflow: auto;
}
#pj_jiaoshi_main .name_cxleft{
margin-top: 25px;
}
/* 新添加内容 */
.ml70{
margin-left:5px;
}
.title_xie{
   height:40px;
   background-color:rgb(39,159,70);
   margin-lef:50px;
   margin-left:50px;
   padding-left: 100px;
   padding-top: 15px;
   font-size:18px;
   color:#fff;
}
.xiechengsheng3{
   margin-lef:50px;
   margin-left:50px;
   padding-left: 50px;
    width: 10%;
   background-color:rgb(238,238,238);
   border:solid #999; border-width:0px 1px 0px 1px;
}
.xiechengsheng4{
 width: 100%;
}
.xiechengsheng{
   padding-right: 20px;
   text-align:right;
   background-color:rgb(238,238,238);
   border:solid #999; border-width:0px 1px 0px 0px;
}
#pj_jiaoshi_main .name{
   padding-left: 300px;
}
.img-padding{
 margin-top:-20px;
}
/* 删除按钮样式 */
#pj_jiaoshi_main .name_con .btn{
border-bottom-width:0px;
border-right-width:0px;
border-top-width:0px;
height:132px;
}
</style>
</head>


<body id="text_style" onload="dsl()">
<div class="pager"></div> 
<!--<div> 
<select class="SEID"> 
<option>10</option> 
<option selected="selected" >20</option> 
<option>30</option> 
</select> 
<div class="first">首页</div> 
<div class="pre">上一页</div> 
<div class="centerclass"></div> 
<div class="next">下一页</div> 
<div class="last">最后一页</div> 
<input type="text" value="1" /> of<span class="totelspan">0</span> 
</div>--> 

</body>
</html>
<script src="jquery.min.js"></script>
<script>
var pageindex=1; 
var totelsize=60; 
var centersize=5; 
var pagesize=0; 
var totelSec=0; 
var outStr=""; 
var se="<select class=\"SEID\">" 
+"<option>5</option>" 
+"<option selected=\"selected\" >10</option>" 
+"<option>15</option>" 
+"</select>"; 
var firstdiv="<div class=\"first\">首页</div>"; 
var prediv="<div class=\"pre\">上一页</div>"; 
var centerdiv="<div class=\"centerclass\"></div>"; 
var nextdiv="<div class=\"next\">下一页</div>"; 
var lastdiv="<div class=\"last\">最后一页</div>"; 
$('.pager').empty(); 
$('.pager').append(se) 
$('.pager').append(firstdiv) 
$('.pager').append(prediv) 
$('.pager').append(centerdiv) 
$('.pager').append(nextdiv) 
$('.pager').append(lastdiv) 
function PageInit() 

var size=0; 
var barObj=this; 
var PageReinit=function() 

pagesize=$(".SEID option:selected")[0].innerText; 
size=parseInt(totelsize/pagesize) 
var lastSize=totelsize%pagesize;//最后一页显示记录 
if(lastSize>0) 

size=size+1; 

totelSec=parseInt(size/centersize); 
var leftSize=size%centersize;//最后一个区段的显示记录 
if(leftSize>0) 

totelSec =totelSec+1; 

PageBarinit(); 

var reSetPage=function() 

pageindex=1; 
pagesize=0; 
totelSec=0; 
outStr=""; 

// alert('总页数:'+size) 
// alert('总区段:'+totelSec) 
// alert('每页记录数:'+pagesize); 
var SeClick=function(e) 

var Selectindex=e.target[e.target.selectedIndex].innerText; 
pagesize=parseInt(Selectindex); 
alert('每页显示:'+Selectindex); 
reSetPage(); 
PageReinit(); 

var firstClick=function(e) 

alert('点击到首页'); 
if(pageindex!=1) 

pageindex=1; 
alert('到了第1页'); 


var preClick=function(e) 

alert('点击到上一页'); 
if(pageindex!=1) 

pageindex =pageindex-1; 
alert('到了第'+pageindex+'页'); 

ChangeCenterBar(pageindex+1); 

var pageClick=function(e) 

var targePage=parseInt(e.target.innerText); 
pageindex=targePage; 
alert('点击了第'+targePage+"页"); 
ChangeCenterBar(targePage); 

var nextClick=function(e) 

alert('点击了下一页'); 
if(pageindex<size) 

pageindex =pageindex+1; 
if(pageindex==size) 

alert('到了最后一页'); 

else{ 
alert('到了第'+pageindex+'页'); 


ChangeCenterBar(pageindex-1); 

var lastClick=function(e) 

alert('点击了最后一页'); 
if(pageindex<size) 

pageindex=size; 
alert('到了第'+size+'页'); 


var ChangeCenterBar=function(CurrentIndex) 

var currentSec=parseInt(CurrentIndex/centersize); 
if( CurrentIndex%centersize==1) 

if(currentSec<totelSec) 
{ PageBarinit();} 

if(CurrentIndex%centersize==0) 

var currentSec=parseInt(CurrentIndex/centersize); 
if(currentSec<totelSec) 
{ PageBarinit();} 


var PageBarinit=function() 

$('.SEID').unbind('change',SeClick); 
$('.first').unbind('click',firstClick); 
$('.pre').unbind('click',preClick); 
$('.next').unbind('click',nextClick); 
$('.last').unbind('click',lastClick); 
$('.SEID').bind('change',SeClick); 
$('.first').bind('click',firstClick); 
$('.pre').bind('click',preClick); 
$('.next').bind('click',nextClick); 
$('.last').bind('click',lastClick); 
if(size<=centersize) 

$('.centerclass').empty(); 
for(var i=1;i<=size;i++) 

var cdiv="<span id='Page_"+String(i)+"'>"+i+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+i).bind('click',pageClick); 

}else if(size>centersize) 

$('.centerclass').empty(); 
if( pageindex%centersize==0) 

var currentSec=parseInt(pageindex/centersize);//当前区段 
if(currentSec<totelSec) 

// alert(9) 
var startIndex=(currentSec-1)*centersize+1; 
for(startIndex;startIndex<=currentSec*centersize;startIndex++) 

//alert(startIndex) 
//alert('最大'+currentSec*centersize); 
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+startIndex).bind('click',pageClick); 


else if(currentSec==totelSec) 

var startIndex=(currentSec-1)*centersize+1; 
for(startIndex;startIndex<=currentSec*centersize;startIndex++) 

var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+startIndex).bind('click',pageClick); 

}else{ 
alert('分页出错'); 

}else if(pageindex%centersize>0) 

var currentSec=parseInt(pageindex/centersize)+1;//当前区段 
if(currentSec<totelSec) 

var startIndex=(currentSec-1)*centersize+1; 
for(startIndex;startIndex<=((currentSec-1)*centersize+centersize);startIndex++) 

var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+startIndex).bind('click',pageClick); 


else if(currentSec==totelSec){ 
var startIndex=(currentSec-1)*centersize+1; 
for(startIndex;startIndex<=((currentSec-1)*centersize +size%centersize);startIndex++) 

var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+startIndex).bind('click',pageClick); 

}else 

alert('分页出错'); 




PageReinit(); 

PageInit(); 


</script>

相关文章推荐

前端分页工具

  • 2015年06月26日 23:56
  • 11KB
  • 下载

前端分页jsp实现(二)

  • 2017年09月15日 10:08
  • 6KB
  • 下载

Bootstrap前端分页的实现(带省略号)

介绍Booststrap前端页面带省略号的显示方法

百度page分页技术前端html代码

  • 2014年11月12日 11:03
  • 10KB
  • 下载

前端分页实现demo

  • 2017年09月13日 21:40
  • 2KB
  • 下载

二、jq前端分页插件datatable使用

datatable分页插件
  • lze693
  • lze693
  • 2017年01月21日 11:07
  • 3139

bootstrap-table,前端分页框架

  • 2015年11月19日 17:57
  • 225KB
  • 下载

用JS实现前端分页的简单方法

昨天朋友问我,后台传过来的数据在前端分页显示怎么做。 我也只做过后台分页查询前端显示的方法,没有做过后台不分页而在前端分页的形式。 于是研究了下后台返回全部数据,在前端将数据分页显示的办法。自己研究再...

Datatables学习之前端分页

datatables前端分页实现
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端分页
举报原因:
原因补充:

(最多只允许输入30个字)