Implementing pseudo-paging using jquery

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.