Of Stack

Realization and principle of front end paging function (jQuery)

  • 2021-07-13 04:27:24
  • OfStack

Paging scenarios are common in e-commerce websites, such as the comment area of Taobao Tmall. Paging function 1 is generally implemented in the background, and the front-end request is finished. Now I am bored, so I write it for fun, only realizing functions, but not encapsulating it.

The paging function based on jq can be roughly divided into the following steps:

Defines 1 paging method, which can be called multiple times Parameter setting Request data page jump method Create non-numeric buttons and data content areas Create numeric buttons First screen loading Call

The structure layer only needs 1 container

<div class="pagination-nick"></div>

1. Define the paging method 


function paginationNick(opt){
//code
}

2. Parameter setting

Several required containers class, and several default data parameters that can be modified 


var pager={
 paginationBox:'',// Paging container --  Required 
 mainBox:'',// Content box -- Required 
 numBtnBox:'',// Digital button box --  Required 
 btnBox:'',// Button box  -- Required 
 ipt:'',//input class--  Required 
 goBtn:'',//go btn class -- Required 
 currentBtn:'',// Current button class name -- Required 
 pageCount:5,// How many pieces of data are displayed per page 
 numBtnCount:3,// How many numeric buttons on the left and right sides of the current page 
 currentPage:0,// Current page number data-page Default value of the first screen 
 maxCount:0,//ajax Maximum page number of requested data division 
 data:[]//ajax Requested data 
 };
 pager = $.extend(pager,opt);

3. Request data page jump method

All buttons are created with custom attributes data-page to retain the page number information to jump, and this attribute is used as a parameter to jump page judgment when calling. 


function goPage(btn){
//code
}

obj requests data for ajax (for simulation) 


var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};

Assign the displayed data to pager. data (array)

pager.data=obj.value;

Set the maximum page number of ajax request data division 


pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
pager.data.length / pager.pageCount;

Set the current page number 


if(!isNaN(btn)){// Digital button 
  pager.currentPage=parseInt(btn);
 }else{
  switch(btn){
  case 'first':
  pager.currentPage=0;
  break;
  case 'prev':
  if(pager.currentPage>0){
  --pager.currentPage;
  }
  break;
  case 'next':
  if(pager.currentPage+1<pager.maxCount){
  ++pager.currentPage;
  }
  break;
  case 'last':
  pager.currentPage=pager.maxCount-1;
  break;
  }
 }

Create numeric buttons

createNumBtn(pager.currentPage);

value assigned to the page number jump input box to represent the current page number

$('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);

Content area populating data 


var arr=[],str='';
 arr=pager.data.slice(pager.pageCount*pager.currentPage,
  pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
  pager.pageCount*(pager.currentPage+1) : pager.data.length);
 arr.forEach(function(v){
  str+='<div>'+v+'</div>';
 });
 $('.'+pager.mainBox).html(str);

4. Create non-numeric buttons and data content areas 


 function createOtherBtn(){
//code
}

Content populating 


$('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn"> Home page </button><button data-page="prev" class="prev-btn"> Upper 1 Page </button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn"> Under 1 Page </button><input type="text" placeholder=" Please enter a page number " class="'+pager.ipt+'"><button class="'+pager.goBtn+'"> Determine go</button><button data-page="last" class="last-btn"> End page </button></div><div class="'+pager.mainBox+'"></div>');

Monitor ipt value changes and assign values to go btn data-page 


$('.'+pager.btnBox+' .'+pager.ipt).change(function(){
  if(!isNaN($(this).val())){// It's a number 
   　　　　　　　　 if($(this).val() > pager.maxCount){// Limit value Maximum value, jump last page 
    　　　　　　　　 　 $(this).val(pager.maxCount);
  }
  if($(this).val()<1){// Limit value Minimum value, jump to the first page 
  $(this).val(1);
  }
  }else{// Non-digital emptying value
  $(this).val('');
  }
$('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
 });

Each btn binding requests a data page jump method 


var pager={
 paginationBox:'',// Paging container --  Required 
 mainBox:'',// Content box -- Required 
 numBtnBox:'',// Digital button box --  Required 
 btnBox:'',// Button box  -- Required 
 ipt:'',//input class--  Required 
 goBtn:'',//go btn class -- Required 
 currentBtn:'',// Current button class name -- Required 
 pageCount:5,// How many pieces of data are displayed per page 
 numBtnCount:3,// How many numeric buttons on the left and right sides of the current page 
 currentPage:0,// Current page number data-page Default value of the first screen 
 maxCount:0,//ajax Maximum page number of requested data division 
 data:[]//ajax Requested data 
 };
 pager = $.extend(pager,opt);
0

5. Create numeric buttons 


var pager={
 paginationBox:'',// Paging container --  Required 
 mainBox:'',// Content box -- Required 
 numBtnBox:'',// Digital button box --  Required 
 btnBox:'',// Button box  -- Required 
 ipt:'',//input class--  Required 
 goBtn:'',//go btn class -- Required 
 currentBtn:'',// Current button class name -- Required 
 pageCount:5,// How many pieces of data are displayed per page 
 numBtnCount:3,// How many numeric buttons on the left and right sides of the current page 
 currentPage:0,// Current page number data-page Default value of the first screen 
 maxCount:0,//ajax Maximum page number of requested data division 
 data:[]//ajax Requested data 
 };
 pager = $.extend(pager,opt);
1

Create a numeric button area

Divide the number button into the left and right sides of the current page for analysis, and note all the places that need attention 


var pager={
 paginationBox:'',// Paging container --  Required 
 mainBox:'',// Content box -- Required 
 numBtnBox:'',// Digital button box --  Required 
 btnBox:'',// Button box  -- Required 
 ipt:'',//input class--  Required 
 goBtn:'',//go btn class -- Required 
 currentBtn:'',// Current button class name -- Required 
 pageCount:5,// How many pieces of data are displayed per page 
 numBtnCount:3,// How many numeric buttons on the left and right sides of the current page 
 currentPage:0,// Current page number data-page Default value of the first screen 
 maxCount:0,//ajax Maximum page number of requested data division 
 data:[]//ajax Requested data 
 };
 pager = $.extend(pager,opt);
2

Each btn binding requests a data page jump method 


 $('.'+pager.numBtnBox+' button').each(function(i,v){
  $(this).click(function(){
  goPage(v.getAttribute('data-page'));
  });
 });

Button Disable 


var pager={
 paginationBox:'',// Paging container --  Required 
 mainBox:'',// Content box -- Required 
 numBtnBox:'',// Digital button box --  Required 
 btnBox:'',// Button box  -- Required 
 ipt:'',//input class--  Required 
 goBtn:'',//go btn class -- Required 
 currentBtn:'',// Current button class name -- Required 
 pageCount:5,// How many pieces of data are displayed per page 
 numBtnCount:3,// How many numeric buttons on the left and right sides of the current page 
 currentPage:0,// Current page number data-page Default value of the first screen 
 maxCount:0,//ajax Maximum page number of requested data division 
 data:[]//ajax Requested data 
 };
 pager = $.extend(pager,opt);
4

6. First screen loading 


var pager={
 paginationBox:'',// Paging container --  Required 
 mainBox:'',// Content box -- Required 
 numBtnBox:'',// Digital button box --  Required 
 btnBox:'',// Button box  -- Required 
 ipt:'',//input class--  Required 
 goBtn:'',//go btn class -- Required 
 currentBtn:'',// Current button class name -- Required 
 pageCount:5,// How many pieces of data are displayed per page 
 numBtnCount:3,// How many numeric buttons on the left and right sides of the current page 
 currentPage:0,// Current page number data-page Default value of the first screen 
 maxCount:0,//ajax Maximum page number of requested data division 
 data:[]//ajax Requested data 
 };
 pager = $.extend(pager,opt);
5

7. Call 


var pager={
 paginationBox:'',// Paging container --  Required 
 mainBox:'',// Content box -- Required 
 numBtnBox:'',// Digital button box --  Required 
 btnBox:'',// Button box  -- Required 
 ipt:'',//input class--  Required 
 goBtn:'',//go btn class -- Required 
 currentBtn:'',// Current button class name -- Required 
 pageCount:5,// How many pieces of data are displayed per page 
 numBtnCount:3,// How many numeric buttons on the left and right sides of the current page 
 currentPage:0,// Current page number data-page Default value of the first screen 
 maxCount:0,//ajax Maximum page number of requested data division 
 data:[]//ajax Requested data 
 };
 pager = $.extend(pager,opt);
6

Need to pay attention to the place, notes have been added!

Complete code: 


var pager={
 paginationBox:'',// Paging container --  Required 
 mainBox:'',// Content box -- Required 
 numBtnBox:'',// Digital button box --  Required 
 btnBox:'',// Button box  -- Required 
 ipt:'',//input class--  Required 
 goBtn:'',//go btn class -- Required 
 currentBtn:'',// Current button class name -- Required 
 pageCount:5,// How many pieces of data are displayed per page 
 numBtnCount:3,// How many numeric buttons on the left and right sides of the current page 
 currentPage:0,// Current page number data-page Default value of the first screen 
 maxCount:0,//ajax Maximum page number of requested data division 
 data:[]//ajax Requested data 
 };
 pager = $.extend(pager,opt);
7
Related articles: