HTML静态分页（形如：首页，上一页，下一页，尾页）

在HTML中有时候我们会用到静态分页，一次拿回一定量的数据结果条目，我们会以形如：第2页，共12页  首页
上一页 下一页 尾页
的方式进行静态分页，以下是该种静态分页的代码，供兄弟姐妹们参考。

<div class="page"> <!-- a href="tosearch.jsp" target="_blank"
class="blue">更多</a -->

<SCRIPT type="text/javascript">

function createPageHTML(_nPageCount, _nCurrIndex, _sPageName, _sPageExt){
  if(_nPageCount == null || _nPageCount<1){     return;
  }   var nCurrIndex = _nCurrIndex || 0;   var
pre,next,first,last;   if(_nPageCount==1){   first=‘<span
class="blue">首页</span>&nbsp;‘; pre=‘<span
class="blue">上一页</span>&nbsp;‘; next=‘<span
class="blue">下一页</span>&nbsp;‘; last=‘<span
class="blue">尾页</span>&nbsp;‘; }else{  if(_nCurrIndex==0){
     pre=‘<span
class="blue">上一页</span>&nbsp;‘;     
first=‘<span class="blue">首页</span>&nbsp;‘; next=‘<a
class="blue" href="‘+_sPageName+‘_‘
+(nCurrIndex+1)+‘.‘+_sPageExt+‘">下一页</a>&nbsp;‘;
     last=‘<a class="blue" href="‘+_sPageName+‘_‘ +
(_nPageCount-1)+‘.‘+_sPageExt+‘">尾页</a>&nbsp;‘; } else{
 if(_nCurrIndex==1){    first=‘<a class="blue"
href="‘+_sPageName+‘.‘+_sPageExt+‘">首页</a>&nbsp;‘; pre=‘<a
class="blue" href="‘+_sPageName+‘.‘+_sPageExt+‘">上一页</a>&nbsp;‘;
   if(_nPageCount==2){ next=‘<span
class="blue">下一页</span>&nbsp;‘; last=‘<span
class="blue">尾页</span>&nbsp;‘; } else{ next=‘<a class="blue"
href="‘+_sPageName+‘_‘ +
(nCurrIndex+1)+‘.‘+_sPageExt+‘">下一页</a>&nbsp;‘; last=‘<a
class="blue" href="‘+_sPageName+‘_‘ +
(_nPageCount-1)+‘.‘+_sPageExt+‘">尾页</a>&nbsp;‘; }} else{
   first=‘<a class="blue"
href="‘+_sPageName+‘.‘+_sPageExt+‘">首页</a>&nbsp;‘; pre=‘<a
class="blue" href="‘+_sPageName+‘_‘+(nCurrIndex
-1)+‘.‘+_sPageExt+‘">上一页</a>&nbsp;‘; if(nCurrIndex+1==_nPageCount){
next=‘<span class="blue">下一页</span>&nbsp;‘; last=‘<span
class="blue">尾页</span>&nbsp;‘; } else{ next=‘<a class="blue"
href="‘+_sPageName+‘_‘ +
(nCurrIndex+1)+‘.‘+_sPageExt+‘">下一页</a>&nbsp;‘; last=‘<a
class="blue" href="‘+_sPageName+‘_‘ +
(_nPageCount-1)+‘.‘+_sPageExt+‘">尾页</a>&nbsp;‘; } }

}

}

document.write("第"+(nCurrIndex+1)+"页，共"+_nPageCount+"页&nbsp;&nbsp;"+first+pre+next+last);
}

createPageHTML(${PAGE_COUNT}, ${PAGE_INDEX}, "${PAGE_NAME}",
"${PAGE_EXT}");   </SCRIPT> </div>

时间： 2024-10-11 13:17:12

HTML静态分页（形如：首页，上一页，下一页，尾页）的相关文章

JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1nvaq99R 密码:9nfb 上效果图: 页面代码 <script type="text/javascript"> //分页查询开始 $(document).ready(function() { getDataList(0, null); }); var rows = 10;

GridView自定义分页样式（上一页，下一页，到第几页）

今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1). 图(1)GridView分页效果 自定义GridView的分页样式,使用的是GridView的  <PagerTemplate>元素.我们先看这段分页代码. 1 <PagerTemplate> 2 <br /> 3 <asp:Label ID="lblPage" runat="s

jQuery静态分页功能

分页功能在做项目的过程中是常常用到的,下面是我常用的一款分页效果: 1.分页的CSS样式(page.css) 1 #setpage { 2 margin: 15px auto; 3 text-align: center; 4 } 5 #setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{ 6 border:1px solid #DDD; 7 background:#0d6cbf;

Highcharts 静态分页

草,为毛.先粘上代码,就不能在代码前面写字. 非要先写字,再粘代码.坑爹-- demo: new HighchartsPager('container',4, {         title: {             text: 'Monthly Average Temperature',             x: -20 //center         },         subtitle: {             text: 'Source: WorldClimate.com

Python - Django - 添加首页尾页上一页下一页

添加首页和尾页: views.py: from django.shortcuts import render from app01 import models def book_list(request): # 从 URL 中取参数 page_num = request.GET.get("page") print(page_num, type(page_num)) page_num = int(page_num) # 定义两个变量保存数据从哪儿取到哪儿 data_start = (pa

NVelocity分页时判断首页前一页后一页末页的详细

共$Data.TotalCount个/$Data.PageNum页 #if($Data.PageNum==1) <span class="disabled"> << </span> <span class="disabled"> < </span> #else <a href="StuList.ashx?PageNum=1"> << </a> #

GridView 分页 上一页 下一页 跳转

效果图: 前端页面 <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"> <Columns> <asp:BoundField D

将静态网页部署到git上访问

1.将已有的项目放在github上 http://www.cnblogs.com/zqunor/p/6583182.html 2.出现错误解决方案 提交错误 http://blog.csdn.net/dengjianqiang2011/article/details/9260435 合并错误 https://www.cnblogs.com/wei325/p/5278922.html 3.将静态网页部署到github上访问 https://www.cnblogs.com/DaisyWang/p/5

css -- 映像 ，分页（上一页下一页）

1.映像:-webkit-box-reflect:blow 2px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.52,transprent), to(white)); 2.对于页码的上一页以及下一页:prev以及next ---- rel属性 设置样式ol.pagination a[rel="prev"], ol.pagination a[rel="next&