前端分页

最新推荐文章于 2022-09-09 23:06:04 发布

dvictory

最新推荐文章于 2022-09-09 23:06:04 发布

阅读量282

点赞数

<!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" οnlοad="dsl()">
<div class="pager"></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>

dvictory

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端分页

思想品德 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
复制链接

扫一扫