js分页控件pagerview分享

7个月前 (04-27 13:36)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

使用时只需要给它传一个数据的总数, 还可以再传每页大小和当前页码, 然后重写onclick方法, 获取翻页事件, 可用来向服务器端发起AJAX请求。

<!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"/>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>js分页控件pagerview分享_武鸣人</title>
 <style type="text/css">
 body{
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: tahoma, arial;
  background: #fff;
 }
.PagerView{
 color: #333;
 text-align: center;
 margin: 8px;
}
.PagerView span{
 color: #999;
 margin: 0 1px;
 padding: 3px 6px;
 border: 1px solid #ccc;
}
.PagerView span.on{
 color: #333;
 font-weight: bold;
 border: 1px solid #333;
}
.PagerView a{
 color: #00f;
 text-decoration: none;
}
.PagerView a span{
 border: 1px solid #66c;
 color: #33f;
}
.PagerView a:hover span{
 color: #f00;
 background: #ff9;
}
 </style>
<script type="text/javascript">
<!--
/**
 * 开源代码, 有兴趣的可以免费使用.
 *
 * 分页控件, 使用原生的JavaScript代码编写. 重写onclick方法, 获取翻页事件,
 * 可用来向服务器端发起AJAX请求.
 *
 * 示例:
 * HTML:
 * <div id="pager"></div>
 *
 * JavaScript:
 * var pager = new PagerView('pager');
 * pager.index = 3; // 当前是第3页
 * pager.size = 16; // 每页显示16条记录
 * pager.itemCount = 100; // 一共有100条记录
 *
 * pager.onclick = function(index){
 * alert('click on page: ' + index);
 * // display data...
 * pager.render();
 * };
 *
 * pager.render();
 *
 * @param id: HTML节点的id属性值, 控件将显示在该节点中. 可以延迟到render方法调用之前设置.
 *///武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function PagerView(id){
 var self = this;
 this.id = id;
 this.container = null;
 this.index = 1; // 当前页码, 从1开始
 this.size = 15; // 每页显示记录数
 this.maxButtons = 9; // 显示的分页按钮数量
 this.itemCount = 0; // 记录总数
 this.pageCount = 0; // 总页数
 /**
  * 控件使用者重写本方法, 获取翻页事件, 可用来向服务器端发起AJAX请求.
  * @param index: 被点击的页码.
  */
 this.onclick = function(index){
 };
 /**
  * 内部方法.
  */
 this._onclick = function(index){
  self.index = index;
  self.onclick(index);
  self.render();
 };
 /**
  * 在显示之前计算各种页码变量的值.
  */
 this.calculate = function(){
  self.pageCount = parseInt(Math.ceil(self.itemCount / self.size));
  self.index = parseInt(self.index);
  if(self.index > self.pageCount){
   self.index = self.pageCount;
  }
 };
 /**
  * 渲染分页控件.
  */
 this.render = function(){
  if(self.id != undefined){
   var div = document.getElementById(self.id);
   div.view = self;
   self.container = div;
  }
  self.calculate();
  var start, end;
  start = Math.max(1, self.index - parseInt(self.maxButtons/2));
  end = Math.min(self.pageCount, start + self.maxButtons - 1);
  start = Math.max(1, end - self.maxButtons + 1);
  var str = "";
  str += "<div class=\"PagerView\">\n";
  if(self.pageCount > 1){
   if(self.index != 1){
    str += '<a href="javascript://1"><span>|<</span></a>';
    str += '<a href="javascript://' + (self.index-1) + '"><span><<</span></a>';
   }else{
    str += '<span>|<</span>';
    str += '<span><<</span>';
   }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
  for(var i=start; i<=end; i++){
   if(i == this.index){
    str += '<span class="on">' + i + "</span>";
   }else{
    str += '<a href="javascript://' + i + '"><span>' + i + "</span></a>";
   }
  }
  if(self.pageCount > 1){
   if(self.index != self.pageCount){
    str += '<a href="javascript://' + (self.index+1) + '"><span>>></span></a>';
    str += '<a href="javascript://' + self.pageCount + '"><span>>|</span></a>';
   }else{
    str += '<span>>></span>';
    str += '<span>>|</span>';
   }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
  str += ' 一共' + self.pageCount + '页, ' + self.itemCount + '条记录 ';
  str += "</div><!-- /.pagerView -->\n";
  self.container.innerHTML = str;
  var a_list = self.container.getElementsByTagName('a');
  for(var i=0; i<a_list.length; i++){
   a_list[i].onclick = function(){
    var index = this.getAttribute('href');
    if(index != undefined && index != ''){
     index = parseInt(index.replace('javascript://', ''));
     self._onclick(index)
    }
    return false;
   };
  }
 };
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<h1>分页控件PagerView示例</h1>
<div id="pager" style="width: 900px; margin: 20px; padding: 4px; border: 1px solid #999;">
</div>
<div id="info" style="text-align: center; width: 900px; margin: 0 20px; padding: 4px; border: 1px solid #999;">
</div>
<div style="text-align: center; width: 900px; margin: 0 20px; padding: 4px;">
 <a href="https://www.wuming.ren/">www.wuming.ren</a>
</div>
<script type="text/javascript">
<!--
var pager = new PagerView('pager');
pager.itemCount = 301;
pager.size = 5;
pager.index = 3;
pager.onclick = function(index){
 document.getElementById('info').innerHTML = '现在翻到第' + index + '页';
 if(index == 12){
  if(confirm('现在是12页, 要弹出一个窗口?')){
   url = 'https://www.wuming.ren';
   window.open(url);
  }
 }
};//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
pager.render();
//-->
</script>
</body>
</html>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/859.html

回帖

js分页控件pagerview分享 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息