原生JavaScript分页控件PagerView

稿源：互联网 2022-04-02 21:40:19 点击： 4517 撤稿纠错

分页控件, 是一个使用原生的JavaScript代码编写的控件. 主要是为了在我的数据表格控件中使用, 可单独使用.. 使用时只需要给它传一个数据的总数, 还可以再传每页大小和当前页码, 然后重写onclick方法, 获取翻页事件, 可用来向服务器端发起AJAX请求, 其它的就不需要你再做了.

以下讨论的是和分页控件 PagerView相关的原生JavaScript分页控件PagerView 教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
 <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">
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;
   };
  }
 };
}
//-->
</script>
</head>
<body>
<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="http://www.ideawu.net/">http://www.ideawu.net/</a>
</div>
<script type="text/javascript">

</script>
</body>
</html>

关于原生JavaScript分页控件PagerView的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011022667921.shtml方便下次再访问哦。

·上一篇： 并排2列DIV高度自适应的方法
·下一篇： js实现仿flash效果的弹性导航菜单

原生JavaScript分页控件PagerView

文章分类LIST >>返回首页

最新游戏

最新新闻