心扬JS分页函数代码

代码如下:

<!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=gb2312" />
<title>JS分页</title>
<style type="text/css">
body{font-size:12px;}
#pager{ height:20px; float:left;}
#pager a{height:18px; line-height:18px; border:1px solid #ccc; padding-left:0.4em; padding-right:0.4em; text-decoration:none; display:block; float:left; margin:0px 3px;}
#pager a:hover{background-color:#1f3a87; color:#fff; text-decoration:none;}
.not-current{background-color:#fff; color:#1f3a87;}
.current{background-color:#1f3a87; color:#fff; text-decoration:none;}
</style>
</head>
<body onload="CreatePager(10,10,2043,'?page=14',10)">
<script type="text/javascript">
//pageSize,每页显示多少条记录,currentPage当前页,recordCount共有多少条记录,url页面路径，必须带有page参数,numCount，每页显示多少个分页数字
var CreatePager=function(pageSize,currentPage,recordCount,url,numCount){
//创建一个链接
var CreateHref=function(url,page,p_ele,t,currentPage){
var a=document.createElement('a');
var reg=new RegExp("page=\\d+");
url=url.replace(reg.exec(url),'page='+page)
a.setAttribute('href',url);
a.setAttribute('class',currentPage==page?'current':'not-current');
var t=document.createTextNode(t);
a.appendChild(t);
document.getElementById(p_ele).appendChild(a);
}
//计算属于哪个区间
var GetNumArea=function(num,numCount,pageCount){
var currentArea=parseInt((num-1)/numCount)+1;
var lastArea=parseInt((pageCount-1)/numCount)+1;
this.minNum=(currentArea-1)*numCount+1;
var tempTaxNumber=currentArea*numCount+1;
this.maxNum=tempTaxNumber>pageCount?pageCount:tempTaxNumber;
this.preAreaNum=currentArea<=1?1:this.minNum-1;
this.afterAreaNum=currentArea>=lastArea?pageCount:this.maxNum+1;
}
var pageCount=0;//总页数
pageCount=recordCount%pageSize===0?recordCount/pageSize:parseInt(recordCount/pageSize)+1;//总页数
// var pager=document.getElementById('pager');//获取分页的元素
// var pageSummary=document.createElement('span');//创建一个DIV，在里面显示第几页共几页
// var summaryContent=document.createTextNode('第'+currentPage+'页共'+pageCount+'页');
// pageSummary.appendChild(summaryContent);
// pager.appendChild(pageSummary);
CreateHref(url,1,'pager','首页',currentPage);//添加首页链接
CreateHref(url,new GetNumArea(currentPage,numCount,pageCount).preAreaNum,'pager','<<',currentPage);//添加前面的省略号
//显示分页数字 开始
var pageArea = pageCount / numCount;// 页码区间
if(pageCount<numCount){
for(i=1;i<=pageCount;i++){
CreateHref(url,i,'pager',i,currentPage);
}
}else{
currentPage=currentPage>=pageCount?pageCount:currentPage;
var minNum=new GetNumArea(currentPage,numCount,pageCount).minNum;
var maxNum=new GetNumArea(currentPage,numCount,pageCount).maxNum;
for(i=minNum;i<maxNum;i++){
CreateHref(url,i,'pager',i,currentPage);
}
}
//显示分页数字 结束
CreateHref(url,new GetNumArea(currentPage,numCount,pageCount).afterAreaNum,'pager','>>',currentPage);//显示分页后面的省略号
CreateHref(url,pageCount,'pager','末页',currentPage);//添加末页链
}
</script>
<div id='pager'></div>
</body>
</html>

赞 (0)

相关推荐

  • 基于jQuery的js分页代码

    复制代码 代码如下: function pagerBar(dataCount,pageSize,serverUrl,contentPlace,pagerbarPlace,callBack){ this.dataCount = dataCount; this.pageSize = pageSize; this.serverUrl = serverUrl; this.contentPlace = $("#"+contentPlace); this.pagerbarPlace = $(&qu

  • 非常不错的一个JS分页效果代码，值得研究

    本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~ 补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 JS静态分页程序 a:link,a:visited,a:hover,.current,#info{ border:1px solid #DDD; background:#F2F2F2; disp

  • js分页显示div的内容

    div分页显示_我们_www.jb51.net #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000000; overflow-pageINdex:hidden; overflow-y:hidden; word-break:break-all; } a{ font-size:12px; color:#0000

  • 基于jquery封装的一个js分页

    复制代码 代码如下: (function ($) { var PageFunc = function PageFunc() { } $.PageFunc = function (Total, PageSize, curPageNum, FunUrl) { if (PageSize == "" || PageSize == null || PageSize == undefined) { PageSize = 10; } if (curPageNum == "" ||

  • 新闻内页-JS分页

    '//判断内容里是不是包含这个分页标签 if instr(cinfo,"[NextPage]")>0 thenflag=1elseflag=0end if '//设置参数<script language="Javascript" >var Text,PageSize,flagText="<%=DealJsText(cinfo)%>"; PageSize=1500;flag=<%=flag%>;</s

  • 简单的js分页脚本

    复制代码 代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script>

  • 心扬JS分页函数代码

    复制代码 代码如下: <!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=&qu

  • PHP分页函数代码（简单实用型）

    PHP分页函数代码（简单实用型）

    准备数据: 新建一个数据库 test 执行下面的语句(新建一个表 test :id.sex.name 三个字段) CREATE TABLE `test` ( `id` INT( 4 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `sex` INT( 1 ) NOT NULL , `name` VARCHAR( 20 ) NOT NULL ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_bin; 添加数据到 te

  • 一些常用的JS功能函数代码

    复制代码 代码如下: //获取对象 function getObject(objectId,top) { doc = top?window.top.document:document; if(typeof(objectId)!="object" && typeof(objectId)!="function") { if(doc.getElementById && doc.getElementById(objectId)) { // W

  • Js四则运算函数代码

    复制代码 代码如下: //除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精确的除法结果. //调用:accDiv(arg1,arg2) //返回值:arg1除以arg2的精确结果 function accDiv(arg1,arg2){ var t1=0,t2=0,r1,r2; try{t1=arg1.toString().split(".")[1].length}catch(e){} try{t2=

  • js打印纸函数代码（递归）

    复制代码 代码如下: //打印纸尺寸,单位MM //http://en.wikipedia.org/wiki/ISO_216 var page = function() { var A0 = { name: "A0", width: 841, height: 1189 }; //单位MM var B0 = { name: "B0", width: 1000, height: 1414 }; //单位MM var C0 = { name: "C0"

  • php分页函数示例代码分享

    分享一例php分页函数代码,用此函数实现分页代码很不错. 代码,php分页函数. 复制代码 代码如下: <?php/** Created on 2011-07-28* Author : LKK , http://lianq.net* 使用方法:require_once('mypage.php');$result=mysql_query("select * from mytable", $myconn);$total=mysql_num_rows($result);    //取得

  • jquery.pager.js分页实现详解

    本文实例为大家分享了jquery.pager.js分页实现代码,供大家参考,具体内容如下 jquery.pager.js /* * jQuery pager plugin * Version 1.0 (12/22/2008) * @requires jQuery v1.2.6 or later * * Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html * * Copyright (c) 2008-200

  • Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.

  • 纯js分页代码(简洁实用)

    复制代码 代码如下: //每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0; var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage; key=""; currentSet=0; var

随机推荐