Code example using native javascript to achieve paging effect

This article mainly introduces the native javascript to achieve the paging effect in detail. It has a certain reference value. Interested friends can refer to it

With the rapid development of the front-end industry in recent years, various new frameworks and new methods have emerged one after another, making us a bit dazzled.

I just have a lot of free time recently, so I am ready to learn the basic javascript of the front end. It is purely a practice, write a paging, and share it with everyone by the way

function pageFunc(conf){
 this.myFunc = conf.click //用户点击要执行的方法
 this.total = conf.total; //总页数
 this.currentPage = 1; //当前页码
 this.init()  //初始化 
}

pageFunc.prototype.init = function(){
 var total = this.total,
 currentPage = this.currentPage,
 _this = this;

 listeners = {
 'setWhat' : function(opts) {
  _this.aClick(opts.src)
  return false;
 }
 };

 listenersPre = {
 'lmw-pre' : function(opts) {
  _this.prevClick()
  return false;
 }
 };

 listenersAdd = {
 'lmw-add' : function(opts) {
  _this.addClick()
  return false;
 }
 };

 var rootele = this.createPage(1,total);
 document.getElementById('page-coat').innerHTML = rootele

 $on(document.getElementById('page-coat'), ['click'], listeners);//点击a标签
 $on(document.getElementById('page-coat'), ['click'], listenersPre);//点击上一页
 $on(document.getElementById('page-coat'), ['click'], listenersAdd);//点击下一页

}
//创建HTML分页结构字符串
pageFunc.prototype.createPage = function(page,total){
 var str = `<a class="lmw-current" href="#" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page}</a>`
 for(var i=1;i<=3;i++){
 if(page-i>1){
  str = `<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" 
  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
   rel="external nofollow" >${page-i}</a>`+str
 }
 if(page+i<total){
  str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" 
  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${(page+i)}</a>`
 }
 };
 if(page-4>1){
 str = &#39;<span>...</span>&#39;+str
 };
 if(page+4<total){
 str = str+&#39;<span>...</span>&#39;
 };
 if(page>1){
 str = `<a class="lmw-pre" href="#" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a>
 <a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>`+str
 };
 if(page<total){
 str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" >${total}</a><a class="lmw-add" href="#" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 rel="external nofollow" rel="external nofollow" >下一页</a>`
 };
 return str
}
//上一页方法
pageFunc.prototype.prevClick = function(){
 var total = this.total
 var va = --this.currentPage 
 var newret = this.createPage(va, total)
 document.getElementById(&#39;page-coat&#39;).innerHTML = newret
 this.myFunc(va) 
}
//下一页方法
pageFunc.prototype.addClick = function(){
 var total = this.total
 var va = ++this.currentPage
 var newret = this.createPage(va, total)
 document.getElementById(&#39;page-coat&#39;).innerHTML = newret 
 this.myFunc(va) 
};
//点击方法
pageFunc.prototype.aClick = function(_this){
 var total = this.total
 var va = parseInt(_this.innerText);
 this.currentPage = va
 var rootele = this.createPage(va, total)
 document.getElementById(&#39;page-coat&#39;).innerHTML = rootele
 this.myFunc(va) 
};


//二：封装事件代理方法
function $on(dom, event, listeners) {
 $addEvent(dom, event, function(e) {
 var e = e || window.event,
 src = e.target || e.srcElement,
 action,
 returnVal;
 
 while (src && src !== dom) {
 action = src.getAttribute(&#39;attr-action&#39;) || src.getAttribute(&#39;class&#39;) ;
 if (listeners[action]) {
 returnVal = listeners[action]({
 src : src,
 e : e,
 action : action
 });

 if (returnVal === false) {
 break;
 }
 }
 src = src.parentNode;
 }
 });
};
//1、封装跨浏览器事件绑定方法
function $addEvent(obj, type, handle) {
 if(!obj || !type || !handle) {
 return;
 }

 if( obj instanceof Array) {
 for(var i = 0, l = obj.length; i < l; i++) {
 $addEvent(obj[i], type, handle);
 }
 return;
 }

 if( type instanceof Array) {
 for(var i = 0, l = type.length; i < l; i++) {
 $addEvent(obj, type[i], handle);
 }
 return;
 }
//2、解决IE中this指向window的问题
 function createDelegate(handle, context) {
 return function() {
 return handle.apply(context, arguments);
 };
 }
 
 if(window.addEventListener) {
 var wrapper = createDelegate(handle, obj);
 obj.addEventListener(type, wrapper, false);
 }
 else if(window.attachEvent) {
 var wrapper = createDelegate(handle, obj);
 obj.attachEvent("on" + type, wrapper);
 }
 else {
 obj["on" + type] = handle;
 }
};

How to use:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>分页效果</title>
 <style type="text/css">
 #page-coat a{
  text-decoration:none; 
  display: inline;
  float: left;
  padding: 3px 10px 3px 10px; 
  overflow: hidden; 
  border:1px solid #ccc;
  color:#999;
  margin-right: 5px;
  cursor: pointer;
  background: #fff;
  
 }
 #page-coat a:hover{
  border: 1px solid #FF6600;
  background-color: #FF6600;
  color: #fff; 
 }
 #page-coat span{
  display: inline;
  float: left;
  color:#999;
  background: #fff;
 }
 #page-coat a.lmw-current{
  color: #FF6600;
  border: 1px solid #FF6600;
  background-color: #FFEEE5;
 }
 </style>
</head>
<body class="l-bg2">
 <p id="page-coat">
 
 </p> 
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
var conf = {
 &#39;total&#39;:100,
 &#39;click&#39;:function(e){ //e为当前页码
/* $.get(&#39;/php&#39;,{"page":e},function(data){
  console.log(&#39;ok&#39;)
 })*/
 }
}
var page = new pageFunc(conf);
</script>
</html>

It is still troublesome to use native. In order to realize the business, you have to encapsulate a .on event binding method that imitates JQ. The writing is relatively simple, some configurationinterface is not exposed, and can be exposed abstractly.

The above is the detailed content of Code example using native javascript to achieve paging effect. For more information, please follow other related articles on the PHP Chinese website!