這篇文章主要介紹了Jquery簡單分頁實現方法,實例分析了jquery分頁的相關實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了Jquery簡單分頁實現方法。分享給大家供大家參考。具體如下：

js代碼：

1. function dolistpage(pagerow,pagenum,rowcount,pagecount){ 
2. $("#pagemsg").html("每頁顯示"+pagerow+"條，當前" + pagenum + "/" +pagecount + "頁共" +rowcount + "條"); 
3. if (pagenum == 1) { 
4. $("#fpbtn").attr("disabled", true); 
5. $("#rpbtn").attr("disabled", true); 
6. }else { 
7. $("#fpbtn").removeAttr("disabled"); 
8. $("#rpbtn").removeAttr("disabled"); 
9. } 
10. if (pagenum == pagecount) { 
11. $("#npbtn").attr("disabled", true); 
12. $("#lpbtn").attr("disabled", true); 
13. }else { 
14. $("#npbtn").removeAttr("disabled"); 
15. $("#lpbtn").removeAttr("disabled"); 
16. } 
17. $("#fpbtn").click(function(){ 
18. loadtpage(1); 
19. }); 
20. $("#rpbtn").click(function(){ 
21. loadtpage(pagenum - 1); 
22. }); 
23. $("#npbtn").click(function(){ 
24. if ((pagenum + 1) >= pagecount)  
25. loadtpage(pagecount); 
26. else 
27. loadtpage(pagenum + 1); 
28. }); 
29. $("#lpbtn").click(function(){ 
30. loadtpage(pagecount); 
31. }); 
32. $("#gpbtn").click(function(){ 
33. var tzys = $("#gpinput").val(); 
34. var re = /^[1-9]+[0-9]*$/; 
35. if (tzys == null || tzys == undefined || tzys == '') { 
36. alert("請輸入跳轉頁數!"); 
37. $("#gpinput").focus(); 
38. return; 
39. } 
40. if (!re.test(tzys)) { 
41. alert("請輸入正確跳轉頁數!"); 
42. $("#gpinput").focus(); 
43. return; 
44. } 
45. if (tzys > pagecount)  
46. tzys = pagecount; 
47. if (tzys <= 0)  
48. tzys = 1; 
49. loadtpage(tzys); 
50. }); 
51. $("#gpinput").val(pagenum); 
52. } 

HTML代碼：

1. <table> 
2. <tfoot> 
3. <tr> 
4. <td colspan="11"> 
5. <span class="water-table-listbtn"></span> 
6. <span class="water-table-page"> 
7. <span id="pagemsg" class="water-table-pagemsg">當前0/0頁</span> 
8. <input type="button" id="fpbtn" value="首頁"/> 
9. <input type="button" id="rpbtn" value="上頁"/> 
10. <input type="button" id="npbtn" value="下頁"/> 
11. <input type="button" id="lpbtn" value="尾頁"/> 
12. <span id="pagemsg" class="water-table-pagemsg">跳轉 
13. <input type="text" id="gpinput" size="3" value="0"/>頁 
14. </span> 
15. <input type="button" id="gpbtn" value="跳轉"/> 
16. </span> 
17. </td> 
18. </tr> 
19. </tfoot> 
20. </table> 

希望本文所述對大家的jquery程序設計有所幫助。