JavaScript实现的分页(样式2)

原创 2007年10月02日 13:28:00

自己写的一个JavaScript的分页函数,这个是第二个样式。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<strong>分页:</strong><br /><br />



<script language="javascript">...
/**//*
 * 函数:Pagination(RCount,PageSize,CurPage,ShowPage,QString)
 * 说明:计算分页信息
 * 作者:lg970044
 * 输入:
 * @参数 {Number}RCount        总的记录个数
 * @参数 {Number}PageSize    页面的最大记录个数
 * @参数 {Number}CurPage        当前页数
 * @参数 {Number}ShowPage    要显示的页数
 * @参数 {String}QString        链接的查询字符串
 * #参数 {String}RUnit        记录的单位
 * 输出:
 * @参数 {String}PaginationString    包含分页信息的字符串
 
*/

function Pagination(RCount,PageSize,CurPage,ShowPage,QString)...{
    
//默认参数RUnit(记录的单位)设为 "个"
    var RUnit=arguments[5]?arguments[5]:"";

    
var PaginationString="";
    
var PCount;
    
    
//取得当前页数
    if (CurPage=="" || CurPage==0 || CurPage==null)...{CurPage=1;}
    
//对查询字符串进行补充
    if (QString=="?")...{QString="";}
    
if (QString.indexOf("?")==-1)...{QString+="?";}else...{QString+="&";}
    
    RCount
=parseInt(RCount);
    PageSize
=parseInt(PageSize);
    CurPage
=parseInt(CurPage);
    ShowPage
=parseInt(ShowPage);
    
    
//计算出总页数
    if (RCount%PageSize==0)...{
        PCount
=parseInt(RCount/PageSize);
    }
else...{
        PCount
=parseInt(RCount/PageSize)+1
    }

    
//当传递的当前页数比总页数大时,使当前页数等于总页数
    if (CurPage>PCount)...{CurPage=PCount;}


    
//组成分页信息的字符串
    var p;
    
if ((CurPage-1)%ShowPage==0
    
...{
        p
=(CurPage-1)/ShowPage
    }

    
else
    
...{
        p
=(((CurPage-1)-(CurPage-1)%ShowPage)/ShowPage)
    }

    PaginationString
+="共有<strong>"+RCount+"</strong>个&nbsp;&nbsp;共<strong>"+PCount+"</strong>页&nbsp;&nbsp;"
    
if (CurPage>1)
    
...{            
        PaginationString
+="<a href=""+QString+"page=1" title="第一页"><img src="images/Pagination_First.gif" border="0"></a>";
    }

    
if (p*ShowPage > 0)
    
...{
        PaginationString 
+="&nbsp;<a href=""+QString+"page="+p*ShowPage+"" title="上"+ShowPage+"页"><img src="images/Pagination_Previous.gif" border="0"></a>";
    }

    
if (PCount>0)
    
...{
        
for (var i=p*ShowPage+1;i<p*ShowPage+ShowPage+1;i++)
        
...{
            
if (i==CurPage)
            
...{
                PaginationString
+="&nbsp;<B><font color="red">"+i+"</font></B>&nbsp;";
            }

            
else
            
...{
                PaginationString
+="&nbsp;<a href=""+QString+"page="+i+"">"+i+"</a>&nbsp;";
            }

            
if (i==PCount) break;
        }

    }

    
if (i<PCount)
    
...{
        PaginationString
+="&nbsp;<a href=""+QString+"page="+i+"" title="下"+ShowPage+"页"><img src="images/Pagination_Next.gif" border="0"></a>";
    }

    
if (CurPage<PCount)
    
...{
        PaginationString
+="&nbsp;<a href=""+QString+"page="+PCount+"" title="尾页"><img src="images/Pagination_Last.gif" border="0"></a>";
    }

    PaginationString
+="&nbsp;&nbsp;<input type=text size=3 value=""+CurPage+"" onkeydown="if(event.keyCode==13){window.location='"+QString+"page='+this.value;return false;}">";


    
return PaginationString;
}

</script>





示例1:
<script language = "JavaScript">...
document.write(Pagination(
1365,20,25,10,""));
</script>
<br /><br />

示例2:
<script language = "JavaScript">...
document.write(Pagination(
1105,20,1,10,"?id=110",""));
</script>
<br /><br />

附:
images/Pagination_First.gif           
images/Pagination_Last.gif           
images/Pagination_Next.gif           
images/Pagination_Previous.gif       

详细内容见:http://www.qlolo.com/?m=pc&a=page_fh_diary&target_c_diary_id=878

javascript实现分页效果

一般的页面我们实现分页效果都是用跳转的形式,但是有些需求需要我们在不跳转页面的同时完成分页效果,简单的一个实现例子:window.onload = function(){ page...
  • yilanyoumeng3
  • yilanyoumeng3
  • 2015年06月18日 16:24
  • 1823

TP3.2.3框架分页以及样式

TP框架自带分页的实现方法,所以使用这个分页方案 1,先看做好的效果图 没有显示共多少页,那个效果可以在自己封装好的方法里面改。 2,首先就是去封装一个公共函数 /** ...
  • meimeidi
  • meimeidi
  • 2016年12月07日 14:55
  • 5066

原生javascript实现的分页插件pagenav

/* ************************** author:Keel (keel.sike@gmail.com) ************************** 页码显示jq...
  • u010523770
  • u010523770
  • 2016年07月04日 15:06
  • 1370

js分页实现,前端实现。

主要是借鉴了网上一个例子,自己重新加了样式,添加了跳转,修改了一些小地方,用于和大家一起分享,前端分页的技巧,表格 的数据是我已经写好了,其实大家也可以前端渲染表格然后再分页,都是可以的。 ...
  • liuzijiang1123
  • liuzijiang1123
  • 2017年01月05日 18:32
  • 8276

js 文章列表li 分页

li文章分页 第1集 第2集 第3集 第4集 第5集 第6集 第7集 第8集 第9集 第10集 ...
  • yongxiaokang1
  • yongxiaokang1
  • 2014年12月19日 10:28
  • 1491

ThinkPHP3.2.3分页样式自定义

ThinkPHP3.2.3的分页类已经被移到了Think\Page.class.php,这是跟以前的版本有些不一样的,使用起来还是跟以前版本差不多,但是默认的效果不敢恭维,所以最好是自己加些样式。 ...
  • u014175572
  • u014175572
  • 2016年11月10日 16:02
  • 6615

Thinkphp3.2分页自定义样式

下面是一个Tp3.2的自定义分页,这个方法也是在看过一个网友的博客之后受到启发这么写的。经过了一些修改,大家在看到代码之后也可以进行修改自定义样式; 主要的样式控制文件就是page.css,框架底层...
  • gu_wen_jie
  • gu_wen_jie
  • 2017年04月12日 13:57
  • 1766

CI 漂亮的分页样式(页码样式)

还在为难看的分页发愁吗,下面教你如何用CI编写漂亮的分页 demo:(本人用bootstrap分页样式,你可以根据个人喜好定义自己的class): 一、决定样式的配置: 1. $config['...
  • LX_96
  • LX_96
  • 2016年07月20日 09:51
  • 5104

整合Booststrap分页样式和ThinkPHP分页类

分页类修改内容:只涉及到样子生成部分代码,在原来每个A链接前加了li,在返回的样式字符串前加UL,以适合Boostrap的css文件的定义。 Bootstrap的css文件基本保持原状,只是加了一个#...
  • qq19124152
  • qq19124152
  • 2014年02月27日 17:29
  • 15585

一个完全独立的、简洁的jquery前端分页组件,用到动态添加页内样式的方法哦。

以前一直没有动态往页面添加过可被调用样式类,今天为了封装的独立性(只有js文件),尝试了一下,竟然能行,因此记录下来,已备后用...
  • foren_whb
  • foren_whb
  • 2015年11月27日 12:50
  • 1445
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现的分页(样式2)
举报原因:
原因补充:

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