I used dojo to create a custom page.

Although there are various paging controls on the market, there is no independent dijit for the pagination of dojo. By taking the opportunity of project development, we made a paging. This page is not the same as that of a common search engine (Baidu or Google). It has a previous page, a next page, no last page, but a home page. To do this, first, the project needs, and second, improve the system performance while meeting user needs. Now, let's decrypt the implementation mechanism of the dojo pagination... First, we analyze the data from the page display, including the previous page, next page, home page, and page number. Among the page data, the previous page, the next page, and the home page are static data. It is only available with whether the current page is the first page and the last page, you can display or hide the home page and the last page based on whether the current page is the homepage or the last page. The page number is displayed based on the index and total number of pages on the current page. To make the page look beautiful, we choose to display only the first five and the last five. Under dojo, how do we generate page numbers and generate pages?

Next, let's look at the code displayed on the page of the dojo page, which shows the structure of the page.

 

<div class="ecm ecmUnifySearchPagination" data-dojo-attach-point="ecmUnifySearchPagination">     <div style="display: inline-block;text-align: center;" >        <div class="pgPrevious" style="display: inline-block">            <a href="#" data-dojo-attach-point="btnPrev"                 data-dojo-props='iconClass: "ecmIconPrevious", showLabel: true'                data-dojo-attach-event="onclick: _onPrevButtonClick">${resourceBundle.previous}</a>        </div>        <div class="pgFirst" style="display: inline-block;">            <a href="#" data-dojo-attach-point="btnFirst"                 data-dojo-attach-event="onclick: _onFirstClick">1</a>        </div>        <div class="pageNumber" style="display: inline-block">            <span data-dojo-attach-point="pageNumber"></span>        </div>        <div class="pgNext" style="display: inline-block">            <a href="#" data-dojo-attach-point="btnNext"                 data-dojo-props='iconClass: "ecmIconNext", showLabel: true'                data-dojo-attach-event="onclick: _onNextButtonClick">${resourceBundle.next}</a>        </div>    </div>    </div>

 

The HTML code alone does not show how paging is implemented. The next step is to see how paging data is displayed in the background through the JS control interface.

Setbuttonstatus: function (value) {This. destroyoldpager (); If (value) {dojo. style (this. ecmunifysearchpagination, "visibility", "visible"); this. _ currentpageindex = value. currentpageindex; this. _ totalpages = value. totalpages; this. _ totalnum = value. totalnum; If (this. _ totalnum = 0) {dojo. style (this. btnfirst, "display", "NONE"); dojo. style (this. btnprev, "display", "NONE"); dojo. style (this. btnnext, "Display", "NONE");} else if (this. _ currentpageindex = 1 & this. _ totalpages = 0) {dojo. style (this. btnfirst, "display", "NONE"); dojo. style (this. btnprev, "display", "NONE"); dojo. style (this. btnnext, "display", "NONE");} else if (this. _ currentpageindex = 1 & this. _ totalpages = 1) {dojo. style (this. btnfirst, "display", "NONE"); this. noresultinfo. innerhtml = ""; dojo. style (this. btnprev, "Di Splay "," NONE "); dojo. style (this. btnnext, "display", "NONE");} else if (this. _ currentpageindex = 1 & this. _ totalpages <= 10 & this. _ totalpages> 0) {// select dojo on the homepage. style (this. btnfirst, "display", "NONE"); this. noresultinfo. innerhtml = ""; dojo. style (this. btnprev, "display", "NONE"); dojo. style (this. btnnext, "display", "Block"); var startpageno = 1; var endpageno = value. totalpages; this. createc Urrentpageno (startpageno, endpageno);} else if (this. _ currentpageindex = 1 & this. _ totalpages> 10) {// select dojo on the homepage. style (this. btnfirst, "display", "NONE"); this. noresultinfo. innerhtml = ""; dojo. style (this. btnprev, "display", "NONE"); dojo. style (this. btnnext, "display", "Block"); var startpageno = 1; var endpageno = 10; this. createcurrentpageno (startpageno, endpageno);} else if (this. _ currentp Ageindex = This. _ totalpages & this. _ totalpages> 10) {// select dojo at the end of the page. style (this. btnfirst, "display", "Block"); this. noresultinfo. innerhtml = ""; dojo. style (this. btnprev, "display", "Block"); dojo. style (this. btnnext, "display", "NONE"); var startpageno = This. _ totalpages-9; var endpageno = value. totalpages; this. createcurrentpageno (startpageno, endpageno);} else if (this. _ currentpageindex <= 5 & This. _ totalpages> = 10) {This. _ shownavgination (); var startpageno = 2; var endpageno = 10; this. createcurrentpageno (startpageno, endpageno);} else if (this. _ totalpages <= 10 & this. _ currentpageindex! = This. _ totalpages & this. _ totalpages> 0) {This. noresultinfo. innerhtml = ""; this. _ shownavgination (); var startpageno = 1; var endpageno = This. _ totalpages; this. createcurrentpageno (startpageno, endpageno);} else if (this. _ totalpages <= 10 & this. _ currentpageindex = This. _ totalpages) {dojo. style (this. btnprev, "display", "Block"); dojo. style (this. btnnext, "display", "NONE"); var startpageno = 1; var endpageno = This. _ totalpages; this. createcurrentpageno (startpageno, endpageno);} else if (this. _ currentpageindex> 5 & this. _ totalpages-this. _ currentpageindex> = 4) {This. _ shownavgination (); var startpageno = This. _ currentpageindex-4; var endpageno = This. _ currentpageindex + 4; this. createcurrentpageno (startpageno, endpageno);} else if (this. _ totalpages> 10 & this. _ totalpages-this. _ currentpageindex <4) {This. _ shownavgination (); var startpageno = This. _ totalpages-9; var endpageno = This. _ totalpages; this. createcurrentpageno (startpageno, endpageno) ;}}, destroyoldpager: function () {var childrennum = This. pagenumber. children. length; For (VAR I = childrennum; I> 0; I --) {dojo. destroy (this. pagenumber. children [I-1]) ;}}, createcurrentpageno: function (startpage, endpage) {for (VAR I = startpage; I <= endpage; I ++) {var pagenum = {pageno: I}; var dijit = new COM. crossitworld. widget. DM. searchuse. pagination. dijit. pagenumber (pagenum); dijit. loadpagenumber (pagenum); If (this. _ currentpageindex = I) {dijit. addcurrentpagestyle ();} dojo. connect (dijit, "onshowcurrentpage", this, this. _ onshowcurrentpage); this. pagenumber. appendchild (dijit. domnode) ;}}, _ shownavgination: function () {dojo. style (this. btnfirst, "display", "Block"); dojo. style (this. btnprev, "display", "Block"); dojo. style (this. btnnext, "display", "Block ");},

The main principle of the above Code is that after the back-end returns the data to the front-end, the front-end displays the home page, Previous Page, last page, and page number based on the index of the current page. Before page display, clear the original page number to avoid affecting the display of the new page number. In createcurrentpageno, VAR dijit = new COM. crossitworld. widget. DM. searchuse. pagination. dijit. pagenumber (pagenum); Create a page number (1, 2, 3...) dynamically ...), in this way, we can create a page number based on our favorite style, and it is easier to change the page number to page X with good scalability.

Next, let's take a look at the effect of this page. The current page is 11 pages. You can flip the page forward, backward, or return to the home page. The page is clear, simple, clear, and easy to use. Although the paging function is implemented, it is not universal. If You encapsulate it as a component and add several custom styles, this is perfect.