javascript分页效果的实现

来源：互联网发布：easyx c语言使用鼠标编辑：程序博客网时间：2024/05/22 02:16

现在公司有很多ministe，都有公布获奖名单的页面。而且这些页面都是静态的。但是由于有时候获奖的人数众多，不得不设计成分页的效果。目前公司的coding针对这种情况没有很好的解决方法。于是今天我抽空写了一个简单的基于javascript的实现方法。

<!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" />
<title>javascript 获奖名单</title>
<script language="javascript" type="text/javascript">
//[CDATA[
   var records = [{no:1,name:"gordon",tel:"13813866456"},
      {no:2,name:"gordon",tel:"13813866456"},
      {no:3,name:"gordon",tel:"13813866456"},
      {no:4,name:"gordon",tel:"13813866456"},
      {no:5,name:"gordon",tel:"13813866456"},
      {no:6,name:"gordon",tel:"13813866456"},
      {no:7,name:"gordon",tel:"13813866456"},
      {no:8,name:"gordon",tel:"13813866456"},
      {no:9,name:"gordon",tel:"13813866456"},
      {no:10,name:"gordon",tel:"13813866456"},
      {no:11,name:"gordon",tel:"13813866456"},
      {no:12,name:"gordon",tel:"13813866456"},
      {no:13,name:"gordon",tel:"13813866456"},
      {no:14,name:"gordon",tel:"13813866456"},
      {no:15,name:"gordon",tel:"13813866456"},
      {no:16,name:"gordon",tel:"13813866456"},
      {no:17,name:"gordon",tel:"13813866456"},
      {no:18,name:"gordon",tel:"13813866456"},
      {no:19,name:"gordon",tel:"13813866456"},
      {no:20,name:"gordon",tel:"13813866456"},
      {no:21,name:"gordon",tel:"13813866456"},
      {no:22,name:"gordon",tel:"13813866456"},

      ];
   var curPage = 1;
   var pageCount = 0;
   var pageSize = 10;

   //获得指定页码内容
   function GetPage(pageIndex)
   {
    //获取总页数
    GetPageCount();

    if(isNaN(pageIndex))
    curPage = 1;
    curPage = pageIndex;
    if(curPage<0)
    curPage = 1;
    if(curPage>pageCount)
    curPage = pageCount;

    //设置分页内容
    ShowList(curPage);

    var strPage = "";

    // 设置分页页码
    for(var i=1;i<=pageCount;i++)
    {
     if(i==curPage)
     strPage += "<b>"+i+"</b>";
     else
     strPage += "<a href='javascript:GetPage(" + i + ");'>"+i+"</a>";
    }

    $("page").innerHTML = strPage;

    // 设置上一页，下一页
    GetPrePage();
    GetNextPage();
   }

   //显示列表内容
   function ShowList(pageIndex)
   {
    var strList="";
    var obj;

    for(var j=(pageIndex-1)*pageSize;j<pageIndex*pageSize;j++)
    {
     if(j<records.length-1)
     {
      obj = records[j];
      strList += "<dl><dd>序号："+ obj["no"] +" 姓名："+obj["name"] +" 手机："+ obj["tel"] +"</dd><dl>";
     }
    else
     {
      break;
     }
    }
    $("list").innerHTML = strList;
   }

   //获取页码数
   function GetPageCount()
   {
    pageCount = parseInt(Math.ceil(records.length*1.0/pageSize),10);
   }

   //获取上一页
   function GetPrePage()
   {
    if(curPage>1)
    $("prevPage").innerHTML = "<a href='javascript:GetPage("+(curPage-1)+")'>上一页</a>";
    else
    $("prevPage").innerHTML = "上一页";
   }

   //获取下一页
   function GetNextPage()
   {
    if(curPage<pageCount)
    $("nextPage").innerHTML = "<a href='javascript:GetPage("+(curPage+1)+")'>下一页</a>";
    else
    $("nextPage").innerHTML = "下一页";
   }

   function $(o)
   {
    if(typeof(o)=="object")
    return o;
    return document.getElementById(o);
   }

   window.onload = function()
   {
    GetPage(1);
   }
//]]
</script>
</head>

</div>
<div id="page"></div>
<div id="prevPage"></div>
<div id="nextPage"></div>
</body>
</html>
一般来讲，获奖名单都是pm给的excel格式，通过excel的CONCATENATE函数，就可以拼成需要的jason格式的数据，非常方便快捷。希望通过这个帖子能让coding的工作轻松一些。

如果大家有什么不明白的地方可以跟我联系，联系方式可以去小事一箩筐：http://www.xiaoshiyiluokuang.com ，最底部有我的联系方式。谢谢。