Implementation of code _javascript techniques based on bootstrap imitation Taobao paging control

Everyone should have been on Taobao, Taobao did not have a few students estimated, but I believe that most people are on Taobao to buy things off the line, very few people will pay attention to Taobao design this kind of, but for ordinary people this is OK, but for a programmer so can not, Because the blogger himself is engaged in front-end work, so by imitating Taobao design style, in order to have a big breakthrough skills above

One, Taobao pagination control to understand

First on a piece of Taobao page Picture:

According to the above analysis of Taobao paging control, we can roughly separate the Taobao pagination control into two parts, part of the core, which is mainly a paging core function, this function is also indispensable, and part of the expansion, This part is equivalent to adding some functionality to enhance and improve the user experience, but in many out-of-the-box pagination controls are not implemented (this is also one of the reasons to build your own wheels). But according to my understanding of Taobao paging control and combined with the requirements of the above analysis, I think Taobao's paging control to be changed to a universal business function control also need to have these changes:

1, such as the expansion of some of the feeling is relatively small, to my personal experience is not very good

2, because the treasure of Taobao more, so only need to display to 100 pages on the line, but in the actual project we may not have 100 pages, so we need to display to the last page of the number of pages on the line

3, because the expansion part is not necessary, only can enhance the user experience, but sometimes the page to the page to reserve the position is not enough, this time we can by setting to remove this part

Second, based on Bootstrap imitation Taobao pagination control input parameters set

Think about what we need for ordinary paging controls: PageNo (Current page), PageSize (number of render per page), count (total), these controls are essential, PageNo is primarily used to identify the page to render the first page, PageSize and count are used primarily to calculate the number of pages to render (PageCount), and the PageCount implementation logic is as follows:

var pagecount=0;
if (count%pagesize==0) {
pagecount=count/pagesize;
} esle{
pagecount=count/pagesize+1;
}

So we can ensure that the PageCount is the final number of pages we want to render, in addition to this basic configuration there are some other configurations that I think are also needed to be added

1, add to the last Confirmation button name modification, this may be in our business is not called OK and called Modify the name, so if there is a function can be modified, then also facilitate the expansion of the business (default: "OK")

2, the main color modification, we know that like Taobao pagination control using the main orange color, and then if it is according to the classic bootstrap color scheme, is the use of light blue, so this also want to support the modification (default:lightblue)

3, Support Shownum configuration, shownum refers to the number of pages to display when pageno=1, for example, Taobao's paging control shows 1 to 5 pages plus an ellipsis. So shownum=5, showing 5 pages; (Default:6)

4, support Skippart, this part refers to the paging control expansion part, this part we should according to the demand to decide whether to display (default:true)

* Default values for parameters in parentheses

Third, based on Bootstrap imitation Taobao plug-in design ideas

Based on the observation of Taobao station, as well as on the design of the above thinking, I think the general design of the plug-in is as follows:

The first step is to receive the incoming parameters of the user

The second step is to pass some of the incoming parameters of the user to a paging algorithm, and then through the paging algorithm, some final rendering results are returned via JSON.

In the third step, the JSON data is rendered so that its final component page control

This design is mainly in line with the software engineering of the high cohesion, low coupling design idea, through this design even if the implementation of the page algorithm is relatively difficult, but we have to separate the rendering of the page and the implementation of the algorithm to facilitate the expansion of later functions, improve the maintainability of the components.

Design of pagination algorithm

In fact, this piece of pagination algorithm page is not designed, pure imitation bar, model Taobao page rules, in the default case, we will be divided into such four kinds of situation (take Taobao as an example)

1, PageNo for 1-5 pages, the current page of the PageNo changed to the number of pages clicked

2, when PageNo is 6, 7 pages, increase rendering 1 to the current page +1, for example, select 6 pages, then we will render 1~7 page

3, then we determine whether PageNo is greater than or equal to PageCount (current page)-shownum, if so, that is to say that the last few pages, then we will directly render the final Shownum page, and the PageNo lit

4, the last case: In addition to these mentioned above, the rest of us are by rendering pageno the first 2 pages and the Pagno of the second two pages, and is the rendering of page one and page two.

Next, let's share my design on the page-break algorithm:

Pagination algorithm logic, mainly for paging logical operation, do not render, the return value is JSON function Pagealgorithm (pageno,pagesize,count,shownum) {var data= ""; if (pageno==1 {data= ' {algorithm ': [{' Text ': ' prev ', ' num ': 0, ' status ': ' Disabled '} ';} else{data= ' {"algorithm": [{"Text": "prev", "num": "' + (pageNo-1) + '", "status": "abled"};///Judge page type if (count>shownum) {if (pageno<=shownum+2) {//PageNo whether the page number to be initialized appears if (Pageno<=shownum) {for (Var i=1;i<=shownum;i++) {if ( pageno==i) {data+= ', {' text ': ' ' +i+ ', ' num ': ' +i+ ', ' status ': ' Active '} ';} 
else{data+= ', {"text": "' +i+ '", "num": "' +i+ '", "status": "abled"} ';} } if (pageno==shownum) {data+= ', {"text": "' +i+ '", "num": "' +i+ '", "status": "abled"} ';}} else{for (Var i=1;i<=pageno;i++) {if (I==pageno) {data+= ', {"text": ' +i+ ', ' num ': ' ' +i+ ', ' status ': ' Active '} ';}
else{data+= ', {"text": "' +i+ '", "num": "' +i+ '", "status": "abled"} ';}
if (pageno!=count) {data+= ', {"text": "' +i+ '", "num": "' +i+ '", "status": "abled"} ';}} When the last page is selected, the ellipsis is hidden if (pageno!=count) {if (pageno!= (count-1)) {data+= ', {"text": "...", "num": "More", "status": ""} ";
}}else if (pageno>count-shownum) {data+= ', {"text": "1", "num": "1", "status": "abled"} '; data+= ', {"text": "2", "num":
"2", "Status": "abled"};
data+= ', {"text": "...", "num": "More", "status": "Disabled"}; for (Var i=count-shownum+1;i<=count;i++) {if (pageno==i) {data+= ', {"text": "' +i+ '", "num": "' +i+ '", "status": "Active "}';
}
else{data+= ', {"text": "' +i+ '", "num": "' +i+ '", "status": "abled"} ';} } else{data+= ', {"text": "1", "num": "1", "status": "abled"} ' data+= ', {"text": "2", "num": "2", "Status": "abled"; data+=
', {"text": "...", "num": "More", "status": "Disabled"}; for (Var i=pageno-2;i<=pageno+2;i++) {if (I==pageno) {data+= ', {' text ': ' +i+ ', ' num ': ' ' +i+ ', ' status ': ' Active '} ';}
else{data+= ', {"text": "' +i+ '", "num": "' +i+ '", "status": "abled"} ';} data+= ', {"text": "...", "num": "More", "status": "Disabled"} ';} else{for (Var i=1;i<=count;i++) {if (pageno==i) {data+= ', {"text": ' +i+ ', ' num ': ' ' +i+ ', ' status ': ' Active '} ';}
else{data+= ', {"text": "' +i+ '", "num": "' +i+ '", "status": "abled"} ';} } if (Pageno==count) {data+= ', {"Text ":" Next Page "," num ":" ' + (pageno+1) + ' "," status ":" Disabled "}]} ';
}else{data+= ', {"text": "Next Page", "num": "' + (pageno+1) + '", "status": "Abled"}]} ';
var Json_return = json.parse (data);
return json_return; }

Note: There is no need to focus on the format in which JSON is ultimately rendered, the main reason is that these parameters are ultimately passed to the next method to render the paging controls, which are equivalent to those agreed in two methods, and our main concern is how to differentiate the paging controls by type, rendering different JSON data

Five, Jpage.js plug-in description

This is a plug-in is the final product of this tutorial, this plug-in in the implementation of the scheme is modeled on the logic of Taobao, but because the company's main business and Taobao's businesses above some differences, so the style is not too consistent. But also can be very good to meet the general business above the common requirements.

How to use it specifically, let's give an example.

We want to get a paging control, the total data is 70, each page shows 3 pieces of data, and to show the expansion section, we just need to call the following to the line.

<! DOCTYPE html>
 
 

The final effect is as follows:

This is easy, everybody. Then the benefits come, this plug-in is open source, not 998, free to take home (please look down).

VI. Plugin download

Because space is limited, so the more use of plug-ins can not be reflected in the text, but for the students to better learn to use this plug-in, here for you to provide a more detailed documentation. And the download version is equivalent to version 1.0. Later, if time permits, this plugin will be a continuous version of the iteration. Download the address, if feel good, please for this plugin point praise.

The above is a small part of the description of the bootstrap imitation Taobao based on the implementation of the page, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!