In the previous project encountered one such problem, the page is divided into two parts (called the unselected Device Information section and the selected device information section), the above is from the database to take out all the device information, the following is the explicit selected device information, the page is as Follows:
You can select any number of devices and click "add to select device" as Shown:
We can see, in the unselected Device Information section has a paging, this is to interact with the background data, which is called "true paging", and the selected device Information section also has a paging, this does not interact with the background data, just to solve the excessive number of data bars caused by the page too long, in response to this problem, I use jquery to access some of the information on the Internet and complete the Pseudo-pagination code shown below:
1<!--pseudo-paging implementation2<script type= "text/javascript" >3 functionpretenddevide () {4 //number of bars to display per page5 varEverypagenum = 10;6 //Current number of pages7 varCurrent_num = 1;8 //get an array of all the selected devices9 varTbodynode = $ ("#chooseDeviceTBody tr"). ToArray ();Ten //gets the length of the array one varARRAYLENGRH =tbodynode.length; a //set total number of bars -$ (". totalnum"). text (arraylengrh); - //Get Total Pages theTotalpagenum = Math.ceil (totalpagenum = arraylengrh/everypagenum); - //Show total Pages -$ (". totalpage"). text (totalpagenum); - //if the array size is greater than ten + if(ARRAYLENGRH > 10){ -$ ("#chooseDeviceTBody tr"). Show (); + //then hide all the back a$ ("#chooseDeviceTBody tr:gt (9)"). Hide (); at}Else{ - //less than 10 can also be displayed -$ ("#chooseDeviceTBody tr"). Show (); - } - //Click the next page button to bind the trigger event -$ (". nextPage"). Click (function(){ in //determines whether the current page number is greater than the maximum page number, and if greater than equals, does not trigger the next page - if(current_num >=Totalpagenum) { to return false; +}Else{ - //Execute next Page the //current page number plus 1 *Current_num + = 1; $ //Show current page numberPanax Notoginseng$ (". current_num"). text (current_num); - //Keep all tr Hidden. the$ ("#chooseDeviceTBody tr"). Hide (); + //gets the start range and end range of the page display a varStart = everypagenum* (current_num-1); the varEnd = everypagenum*current_num; + //Judging the display in the middle of start and end, the remaining hidden - for(vari = Start;i < end;i++){ $$ ("#chooseDeviceTBody tr"). eq (i). show (); $ } - } - }); the - //Click the Prev button to trigger an eventWuyi$ (". prevpage"). Click (function(){ the //determines whether the current page number is less than or equal to 0, if less than equals, does not trigger the previous page - if(current_num <= 1){ wu return false; -}Else{ about //Perform previous page $ //Current page number minus 1 -current_num-= 1; - //Show current page number -$ (". current_num"). text (current_num); a //Keep all tr Hidden. +$ ("#chooseDeviceTBody tr"). Hide (); the //gets the start range and end range of the page display - varStart = everypagenum* (current_num-1); $ varEnd = everypagenum*current_num; the //Judging the display in the middle of start and end, the remaining hidden the for(vari = Start;i < end;i++){ the$ ("#chooseDeviceTBody tr"). eq (i). show (); the } - } in }); the the //Click the last button to bind the event about$ (". endpage"). Click (function(){ the //determines whether the current page number is greater than the maximum page number, and if greater than equals, does not trigger the last the if(current_num >=Totalpagenum) { the return false; +}Else{ - //perform last the //The current page number is assigned the maximum page numberBayiCurrent_num =totalpagenum; the //Show current page number the$ (". current_num"). text (current_num); - //Keep all tr Hidden. -$ ("#chooseDeviceTBody tr"). Hide (); the //gets the start range and end range of the page display the varStart = everypagenum* (current_num-1); the varEnd = everypagenum*current_num; the //Judging the display in the middle of start and end, the remaining hidden - for(vari = Start;i < end;i++){ the$ ("#chooseDeviceTBody tr"). eq (i). show (); the } the }94 }); the$ (". jumpto"). Click (function(){ the //get the page number to jump to the varJumpto = $ ("#jumpPageNum"). Val ();98 varJumptoint =parseint (jumpto); about //if the page you want to jump to does not meet the requirements, do not perform the relevant action - if(jumptoint < 1 | | Jumptoint >Totalpagenum) {101 //return to first page102Current_num = 1;103}Else{104Current_num =jumptoint; the }106$ (". current_num"). text (current_num);107$ ("#chooseDeviceTBody tr"). Hide ();108 varStart = everypagenum* (current_num-1);109 varEnd = everypagenum*current_num; the for(vari = Start;i < end;i++){111$ ("#chooseDeviceTBody tr"). eq (i). show (); the }113 }); the the //Jump Home FirstPage the$ (". firstpage"). Click (function(){117 //determine if the current page number is less than or equal to 1118 if(current_num <= 1){119 return false; -}Else{121 //The current page number is assigned the minimum page number122Current_num = 1;123 //Show current page number124$ (". current_num"). text (current_num); the //Keep all tr Hidden.126$ ("#chooseDeviceTBody tr"). Hide ();127 //gets the start range and end range of the page display - varStart = everypagenum* (current_num-1);129 varEnd = everypagenum*current_num; the //Judging the display in the middle of start and end, the remaining hidden131 for(vari = Start;i < end;i++){ the$ ("#chooseDeviceTBody tr"). eq (i). show ();133 }134 }135 });136 } 137</script>
Implementing pseudo-paging using jquery