html分页实现

来源：互联网发布：如何升级3星淘宝店铺编辑：程序博客网时间：2024/06/07 16:42

分页经常会用到，今天看到一个很好的分页，特记录下来。

转载自：点击打开链接

转自：http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2012/1110/11528.html

先上效果：

实现了“首页” " 末页 "，“上一页”，“下一页”功能。

源码：

<!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>ajax分页</title>  </head>    <body>  <style>  .pagination {font-family: Tahoma;font-size: 12px;height: 22px;margin: 5px 10px;text-align: left;}  .pagination a,.page-cur,.page-start,.page-end,.page-disabled,.page-skip {  height:22px;line-height:22px;margin:0 3px 0 0;text-align:center;vertical-align:middle;white-space:nowrap;}  .pagination input {border-width: 1px;}  .page-start, .pagination a, .page-end, .page-disabled {border: 1px solid #CCCCCC;padding: 0 5px;}  .pagination a {text-decoration: none;}  .page-cur {background-color: #FFEDE1;border: 1px solid #FD6D01;color: #FD6D01;font-weight: 700;padding: 0 5px;}  .page-disabled {color: #CCCCCC;}  .page-skip {color: #666666;padding: 0 3px;}  </style>  <div id="pageNav"></div>  </body>    </html>  <script>  testPage(1);  function testPage(curPage){            supage('pageNav','testPage','',curPage,100,5);    }      /**    * @param {String} divName 分页导航渲染到的dom对象ID  * @param {String} funName 点击页码需要执行后台查询数据的JS函数  * @param {Object} params 后台查询数据函数的参数，参数顺序就是该对象的顺序，当前页面一定要设置在里面的  * @param {String} total 后台返回的总记录数  * @param {Boolean} pageSize 每页显示的记录数，默认是10  */  function supage(divId, funName, params, curPage, total, pageSize){      var output = '<div class="pagination">';      var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10;      if(parseInt(total) == 0 || parseInt(total) == 'NaN') return;      var totalPage = Math.ceil(total/pageSize);      var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1;            //从参数对象中解析出来各个参数      var param_str = '';      if(typeof params == 'object'){          for(o in params){              if(typeof params[o] == 'string'){                 param_str += '\'' + params[o] + '\',';              }              else{                 param_str += params[o] + ',';              }          }          //alert(111);      }      //设置起始页码      if (totalPage > 10) {          if ((curPage - 5) > 0 && curPage < totalPage - 5) {              var start = curPage - 5;              var end = curPage + 5;          }          else if (curPage >= (totalPage - 5)) {              var start = totalPage - 10;              var end = totalPage;          }          else {              var start = 1;              var end = 10;          }      }      else {          var start = 1;          var end = totalPage;      }            //首页控制      if(curPage>1){          output += '<a href="javascript:'+funName+'(' + param_str + '1);" title="第一页" class="page-first">«</a>';      }      else      {          output += '<span class="page-disabled">«</span> ';      }      //上一页菜单控制      if(curPage>1){          output += '<a href="javascript:'+funName+'(' + param_str + (curPage-1)+');" title="上一页" class="page-previous">‹</a>';      }      else{          output += '<span class="page-disabled">‹</span>';      }            //页码展示      for (i = start; i <= end; i++) {          if (i == curPage) {              output += '<a href="javascript:;" class="page-cur">' + curPage + '</a>';          }          else {              output += '<a href="javascript:'+funName+'(' + param_str + i + ');">' + i + '</a>';          }      }      //下一页菜单控制      if(totalPage>1 && curPage<totalPage){          output += '<a title="下一页" href="javascript:'+funName+'('+param_str + (curPage+1)+');" class="page-next">›</a>';      }      else{          output += '<span class="page-disabled">›</span>';      }      //最后页控制      if(curPage<totalPage){          output += '<a title="最后页" href="javascript:'+funName+'('+param_str + totalPage+');" class="page-end">»</a>';      }      else{          output += '<span class="page-disabled">»</span>';      }            output += '</div>';      //渲染到dom中      document.getElementById(divId).innerHTML = output;  };  </script>

再次声明，转自：点击打开链接

转自：http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2012/1110/11528.html

0 0