The previous use of pagers, all based on plug-ins or dependencies written by others; Today I have time to write a simple, or a little logic, due to the time is short, there are a lot of places to improve, if you have any questions, please point out, thank you; Source code address: Github, welcome Star! Personal original, reproduced please indicate the source, thank you!
1. Implementation principle and code implementation
<ul id="ul"> <! - customizable here shows the number of li - > < li > < / li > < li > < / li > < li > < / li > < li > < / li > < li > < / li > < / ul > < div id = "but" > < a id = "first" Href = "javascript: (0)" > home page < / a > < a id = "left" href = "javascript: (0)" > back < / a > < div id = "BTNS" > < div class = "BTN" > 1 < / div > < / div > < a id = "right" href = "javascript: (0)" > page < / a > < a id = "foot" href = "javascript: (0)" > back < / a > < / div >Copy the code- Start by writing basic HTML code, as shown above. Then analyze the implementation principle:
const arr = [];
let [ul,btns,but,left,right,first,foot] =
[getId('ul'),getId('btns'),getId('but'),getId('left'),getId('right'),getId('first'),getId('foot')],
index = 0,
number = 5.// Try to set it to an odd number
lis = ul.getElementsByTagName('li'),
as = btns.getElementsByTagName('div');
Copy the code- Initialize the
Customize some array arr for display; Set index to 0, where index is the current page index (0 is the first page); Set the number of page-turning display numbers, here I default to 5, try to set the odd number, so that the number of page-turning display is symmetric, of course, you can let the user set;
for(let i = 0; i < (Math.ceil(arr.length / lis.length) - 1); i++){let s = i + 2,
newNode = document.createElement('div');
newNode.innerHTML = s;
btns.appendChild(newNode);
}
action();
// Use the es6 language to bind events to each pager button
for(let i = 0; i < as.length; i++){
as[i].onclick = function(){ index = i; action(); }}Copy the code- Calculate the number of pages of data according to the number of data to be displayed and the number of single page display; And bind each page-turning number button to click event;
Why math.ceil (arr.leng/lis.length) -1 when calculating the number of pages displayed? The edge case needs to be carefully considered. When a page shows 5 days of data, there should be 6 to 10 pages, only 2 pages; Therefore, the integer multiple of the data here should be combined with the part of the previous multiple over, that is, by multiple :(0,5],(5,10]… So I find the pattern, divide and round up and subtract one more, because I’ve got a first page. ParseInt (arr. Length/lis.length)
- Then bind the previous page, the next page, the home page, the last page and other corresponding events. I believe everyone can understand the logic of these click events at a glance.
if(as.length > number){
let num_mid = parseInt(number/2) +1;
if(index < num_mid){ / / head
for(let i = 0; i < as.length; i++){
if(i < number){
as[i].style.display = 'inline-block'; }}}else if(index >= num_mid && index < as.length - num_mid){ / / in the middle
for(let i = 0; i < as.length; i++){
if(i >= (index - num_mid + 1) && i < (index - num_mid + 1 + number)){
as[i].style.display = 'inline-block'; }}}else if(index >= as.length - num_mid){ / / the end
for(let i = 0; i < as.length; i++){
if(i >= as.length - number){
as[i].style.display = 'inline-block'; }}}}Copy the code- Here I’ve captured the part of the action() function that controls the number of displays; This part through the user to set the number of page-turning display number and the total number of pages set to improve the logic;
First, it only executes if the total number of pages is greater than the number set by the user. Num_mid = num_mid; num_mid = num_mid; If the current page index(starting from 0) is less than num_mid, only the first number of buttons will be displayed. As. Length-num_mid is the total number of pages minus the median num_mid; When the page index value index is greater than this value, only the number of button data after the total number of data is displayed. If I get to the head and the tail, the middle range will follow; The first value displayed on the page button should start with index – (num_mid-1), which is why it is recommended to set it to even, so that the number of options around the current page is equal and symmetrical; Get the first value, and then take the number button consecutively for display;
for(let i = 0; i < as.length; i++){
as[i].className = ' ';
}
as[index].className = 'btn';
for(let i = 0; i < lis.length; i++){
if(i + lis.length * index < arr.length){
lis[i].style.display = 'block';
lis[i].innerHTML = arr[i + lis.length * index];
}else{
lis[i].style.display = 'none'; }}Copy the code- Clear the class name of the number of pages displayed, and add the class name on the index button to distinguish the current page, so that you can see which page is displayed on the page; The following is according to the user operation to display the index page data, filter and display the corresponding data to the page;
For example, a page needs to display seven pieces of data. You need to search for the corresponding seven pieces of data through the index value of the page. The corresponding data can be obtained by loop I + lis.length * index; When the number of loops is greater than the total number of data (marginalization), special processing is required, and I’m hiding it here;
- Finally, post this (ugly though it is) :
rendering
2. Expand and improve
- The number of page data display and page-turning number display can be controlled by the user input, beautiful page style can be optimized;
- The number of buttons can default not to write a first page there, and can hide/remove the entire page Turner when there is no data;
- You can add a page that lets the user type in what page they want to go to, which is essentially setting the index value;
- Interested can be encapsulated, thank you!