Site front-end _javascript-project experience. Pure JavaScript implements client paging functionality?

Project Introduction:

Note: This project belongs to the hospital electronic case system, due to historical reasons, the entire system background based on Java development, the front-end use of html+css+ native JavaScript, the project function module requirements must be pure JS implementation, and this task is to write a client page paging function for inpatient case pages.

Implementation ideas:

1. Client paging is based on the premise that the data has been loaded, so this function module must wait for the data to load and then load

2. The first page based on client paging only needs to display 24 patient information

3. Previous/Current page/next page function similar, based on the current page to pass the same parameters (page number, limit the number of patients), so naturally think of recursion, but need to determine whether the previous page or the next page is out of range, the return false can be exceeded.

Implementation code:

  Paging function  - 2017-01-16 14:36:36 by  Li Function gopage (num, size) {     //  Current page number     var curPageNum = num;     //  Current page display number of     var pagesize = size;    //   Get the Big Div    var divbox = document.getelementbyid (' OdivBox ');     //  get sub-elements under big div     var divChilds = [];     var allchilds = divbox.childnodes;    for (var i=0; i <allchilds.length;i++) {        if (allchilds[i].nodetype!==1) {             continue;         };        divchilds.push (AllChilds[i]);     };    //  get total number of people     var totalPeople = divChilds.length;     //  Get total pages     var totalpages = 0;    if ( (totalpeople/pagesize) >parseint (totalpeople/pagesize)) {         Totalpages = parseint (totalpeople/pagesize)  + 1;    }else{         totalpages = parseint (totalpeople/pagesize);     };    // curpagenum Start Location     var startNum =  ( CURPAGENUM-1) End position of *pagesize+1;    // curpagenum     var  endnum = curpagenum*pagesize    //  when the end position is greater than the total number of people as the end position      endNum =  (endnum>totalpeople)?totalpeople:endnum;    //  Traversal hides the div  &nbsp that should be displayed in addition to the current page number;  for (var i=1; i< (totalpeople+1);  i++) {         Var curpeople = divchilds[i-1];        if (i>= Startnum && i<=endnum) {             //  compatible Ie,ie must be display:inline             if (mb== ' IE ') {                 curpeople.style.display =  ' inline ';             }else{                 curPeople.style.display =  ' Inline-block ';             }                     } else{            curpeople.style.display =   ' None ';        };    };     //  set previous/Next page content area     var prepage = document.getelementbyid (' Prepage ');     var nextpage = document.getelementbyid (' NextPage ');     prepage.onclick=function () {        if (curPageNum< =1) {            return false;         };        gopage (CurPageNum-1,  pagesize);     };    nextpage.onclick=function () {         if (curpagenum>=totalpages) {             return false;        };         gopage (curpagenum+1, pagesize);    };}; Gopage (1, 24);

Effect Show:

650) this.width=650; "src=" Https://s5.51cto.com/wyfs02/M01/8C/E4/wKiom1h8lAOS2fT2AAM4FW7Q-WE821.png "title=". png " alt= "Wkiom1h8laos2ft2aam4fw7q-we821.png"/>

This article is from the "Li-Yun Development Road" blog, please be sure to keep this source http://xmdevops.blog.51cto.com/11144840/1892363

Site front-end _javascript-project experience. Pure JavaScript implements client paging functionality?