JavaScript实现的分页(样式1)

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

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

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



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

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

    
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);
    
    
//计算出总页数
    if (RCount%PageSize==0)...{
        PCount
=parseInt(RCount/PageSize);
    }
else...{
        PCount
=parseInt(RCount/PageSize)+1
    }

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


    
//组成分页信息的字符串
    PaginationString+="共<strong>"+PCount+"</strong>"+RUnit+"&nbsp;&nbsp;";
    
if (CurPage<2)
    
...{            
        PaginationString
+="首页&nbsp;上一页&nbsp;";
    }
else...{
        PaginationString
+="<a href='"+QString+"page=1'>首页</a>&nbsp;<a href='"+QString+"page="+(CurPage-1)+"'>上一页</a>&nbsp;";
    }

    
    
if (PCount-CurPage<1)
    
...{            
        PaginationString
+="下一页&nbsp;尾页";
    }
else...{
        PaginationString
+="<a href='"+QString+"page="+(CurPage+1)+"'>下一页</a>&nbsp;<a href='"+QString+"page="+PCount+"'>尾页</a>";
    }

    PaginationString
+="&nbsp;&nbsp;页次:<strong style='color:red'>"+CurPage+"</strong>/<strong>"+PCount+"</strong>页&nbsp;&nbsp;<strong>"+PageSize+"</strong>"+RUnit+"/页&nbsp;&nbsp;";
    PaginationString
+="转到:<select onchange="javascript:window.location='"+QString+"page='+this.options[this.selectedIndex].value;">";
    
for (var i=1;i<=PCount;i++)
    
...{
        
if (i==CurPage)
        
...{
            PaginationString
+="<option value='"+i+"' selected>第"+i+"页</option>";
        }
else...{
            PaginationString
+="<option value='"+i+"'>第"+i+"页</option>";
        }

    }

    PaginationString
+="</select>";
    

    
return PaginationString;
}

</script>





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

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

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

javascript实现分页效果

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

深入DataGrid分页样式实例

DataGrid提供了分页功能,不过看上去功能有限,但是我们可以通过DataGrid的一些属性来获取状态以及增加首页、尾页功能按钮。这里没有使用DataGrid的自定义分页功能,如果在速度效率不是很讲...
  • limshirley
  • limshirley
  • 2017年04月17日 14:16
  • 439

thinkphp简洁、美观、靠谱的分页类

废话不多说先上图预览下;即本博客的分页; 这个分页类是在thinkphp框架内置的分页类的基础上修改而来; 原分页类的一些设计,在实际运用中感觉不是很方便; 1:只有一页内容时不显示分页...
  • bai9474500755
  • bai9474500755
  • 2016年03月06日 21:20
  • 2296

js分页实现,前端实现。

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

thinkphp 分页 修改分页样式

如果你对前端css非常熟悉,那么就非常容易了,按照手册做出分页之后,直接按照生成出来的html编写css即可;这里主要说下怎么修改page类生成的html 如何显示分页?手册上已经说得很明确了:按照...
  • u013300983
  • u013300983
  • 2017年05月17日 17:20
  • 665

Yii 分页CLinkPager使用Bootstrap样式分页

  • houxianyj
  • houxianyj
  • 2014年07月10日 17:27
  • 1033

ThinkPHP3.2.3分页样式自定义

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

CSS样式 - 分页按钮样式

HTML 首页 上一页 1
  • wuxinwudai
  • wuxinwudai
  • 2017年03月15日 14:55
  • 1571

配置与使用displaytag实现分页显示

1--- 到displaytag 官网(http://displaytab.sourceforge.net/  )上下载最新的组件,解压压缩包得到displaytag-1.2.jar文件(displa...
  • tf949627780
  • tf949627780
  • 2011年04月19日 14:14
  • 1461

thinkphp5 优美的分页样式

namespace think\paginator\driver; // +-------------------------------------------------------------...
  • MyDream229
  • MyDream229
  • 2017年12月24日 10:51
  • 171
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现的分页(样式1)
举报原因:
原因补充:

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