前端分页

转载 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>

分析一下前端分页机制的具体实现

以前不太懂后台的时候一直在纠结分页机制具体是如何实现的,好高端的赶脚,随着知识的增长和经验的日积月累,发现其实也就是那么回事,那么具体是怎么一回事呢?或许还有很多新手小伙伴不太清楚具体的实现机制,那么...
  • sinat_30729575
  • sinat_30729575
  • 2015年08月28日 13:22
  • 1189

前端分页和后端分页

前端分页和后端分页区别
  • baidongying
  • baidongying
  • 2017年07月19日 20:04
  • 1109

一次性加载数据,前端分页

在项目中,前端显示数据的时候,很多地方需要用到分页,通常有两种方式: 一:点击页码的时候,ajax请求后台服务器得到每一页数据,然后在前台进行显示 二:在页面加载,或者其他事件中,一次性将数据加载...
  • vili_sky
  • vili_sky
  • 2017年06月12日 17:39
  • 1772

一个简单的jquery前端分页

jquery前端分页效果的实现
  • kwen_Lee
  • kwen_Lee
  • 2016年11月18日 10:05
  • 2220

基于jquery 的前端分页插件

一个简单的基于jquery的前端分页插件 测试时需要引入 jquery 库, ...
  • minzhang001
  • minzhang001
  • 2017年01月09日 23:00
  • 897

分页页码的前端显示的实现

分页页码的前端
  • bobbyzyl12
  • bobbyzyl12
  • 2016年08月16日 22:39
  • 1305

jsp实现分页,jsp前端分页

在这里是一个jsp页面的分页,是在前台实现的,不是最优的,因为如果数据量大的话,打开页面可能会慢。      下面是分页代码:              int PageSize=15...
  • aCfeng
  • aCfeng
  • 2012年09月05日 07:01
  • 662

前端实现一个简单的表格分页

实现原理与幻灯类似,不过要注意联动时体验要好。 html结构: ...
  • bboyjoe
  • bboyjoe
  • 2016年09月19日 17:11
  • 3508

前端小结2--jQuery分页插件JPaginate的详细使用

前端小结2–jQuery分页插件JPaginate的详细使用java web开发中,后台分页后,前端需要分页按钮来显示。这里介绍几个好用的jQuery分页插件:http://www.jq22.com/...
  • yhhyhhyhhyhh
  • yhhyhhyhhyhh
  • 2017年09月08日 23:15
  • 366

前端开发-数据分页请求和删除

最近更新时间:2017年5月31日14:57:09     做前端开发的过程中,将服务器数据展现出来是常见的业务需求,这个过程中需要用到分页处理方案。本文研究的实际案例是,移动端展示用户收藏的列表项...
  • wanshaobo888
  • wanshaobo888
  • 2017年05月31日 17:54
  • 514
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端分页
举报原因:
原因补充:

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