paging.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. var Paging = function(nodeid,url,datas,pageSize,callBack,firstPageDatas){
  2. this.currentPage = 1;
  3. this.totalPages = 0;
  4. this.count = 0;
  5. this.firstPageDatas = firstPageDatas;
  6. //初始化
  7. this.init = function(){
  8. this.totalPages = parseInt((this.count + pageSize - 1) / pageSize);
  9. if(this.totalPages > 1){
  10. var html = '<nav>'
  11. +'<ul class="pagination"><li';
  12. if(!this.hasPrevPage()){
  13. html += ' class="disabled"';
  14. }
  15. html += ' id="firstPage"><a>&laquo;</a></li><li';
  16. if(!this.hasPrevPage()){
  17. html += ' class="disabled"';
  18. }
  19. html += ' id="prevPage">'
  20. +'<a>&lsaquo;</a>'
  21. +'</li>';
  22. for(var i=0;i<this.totalPages;i++){
  23. html += '<li id="pageNum-'+(i+1)+'"';
  24. if(i == 0){
  25. html += ' class="disabled"';
  26. }else if(i >= 10){
  27. html += ' class="hide"';
  28. }
  29. html += '><a>'+(i+1)+'</a></li>';
  30. }
  31. html += '<li';
  32. if(!this.hasNextPage()){
  33. html += ' class="disabled"';
  34. }
  35. html += ' id="nextPage"><a>&rsaquo;</a></li><li';
  36. if(!this.hasNextPage()){
  37. html += ' class="disabled"';
  38. }
  39. html += ' id="lastPage"><a>&raquo;</a></li></ul></nav>';
  40. $("#"+nodeid).html(html);
  41. var thisClass = this;
  42. var getThisClass = function(){
  43. return thisClass;
  44. }
  45. $("#"+nodeid+" #firstPage").click(function(){
  46. if($(this).hasClass("disabled")){
  47. return;
  48. }
  49. thisClass.currentPage = 1;
  50. $(this).addClass("disabled");
  51. $("#"+nodeid+" #prevPage").addClass("disabled");
  52. $("#"+nodeid+" #nextPage,#"+nodeid+" #lastPage").removeClass("disabled");
  53. thisClass.commonMethod();
  54. });
  55. $("#"+nodeid+" #prevPage").click(function(){
  56. if($(this).hasClass("disabled")){
  57. return;
  58. }
  59. $("#"+nodeid+" #pageNum-"+(--thisClass.currentPage)).addClass("disabled");
  60. if(thisClass.hasPrevPage()){
  61. $(this).removeClass("disabled");
  62. $("#"+nodeid+" #firstPage").removeClass("disabled");
  63. }else{
  64. $(this).addClass("disabled");
  65. $("#"+nodeid+" #firstPage").addClass("disabled");
  66. }
  67. $("#"+nodeid+" #nextPage,#"+nodeid+" #lastPage").removeClass("disabled");
  68. thisClass.commonMethod();
  69. });
  70. $("#"+nodeid+" #nextPage").click(function(){
  71. if($(this).hasClass("disabled")){
  72. return;
  73. }
  74. $("#"+nodeid+" #pageNum-"+(++thisClass.currentPage)).addClass("disabled");
  75. if(thisClass.hasNextPage()){
  76. $(this).removeClass("disabled");
  77. $("#"+nodeid+" #lastPage").removeClass("disabled");
  78. }else{
  79. $(this).addClass("disabled");
  80. $("#"+nodeid+" #lastPage").addClass("disabled");
  81. }
  82. $("#"+nodeid+" #firstPage,#prevPage").removeClass("disabled");
  83. thisClass.commonMethod();
  84. });
  85. $("#"+nodeid+" #lastPage").click(function(){
  86. if($(this).hasClass("disabled")){
  87. return;
  88. }
  89. thisClass.currentPage = thisClass.totalPages;
  90. $("#"+nodeid+" #firstPage,#"+nodeid+" #prevPage").removeClass("disabled");
  91. $("#"+nodeid+" #nextPage,#"+nodeid+" #lastPage").addClass("disabled");
  92. thisClass.commonMethod();
  93. });
  94. $("#"+nodeid+" [id^='pageNum-']").click(function(){
  95. if($(this).hasClass("disabled")){
  96. return;
  97. }
  98. thisClass.currentPage = parseInt(this.id.split("-")[1]);
  99. if(thisClass.hasPrevPage()){
  100. $("#"+nodeid+" #firstPage,#"+nodeid+" #prevPage").removeClass("disabled");
  101. }else{
  102. $("#"+nodeid+" #firstPage,#"+nodeid+" #prevPage").addClass("disabled");
  103. }
  104. if(thisClass.hasNextPage()){
  105. $("#"+nodeid+" #nextPage,#"+nodeid+" #lastPage").removeClass("disabled");
  106. }else{
  107. $("#"+nodeid+" #nextPage,#"+nodeid+" #lastPage").addClass("disabled");
  108. }
  109. thisClass.commonMethod();
  110. });
  111. }
  112. }
  113. this.commonMethod = function(){
  114. $("#"+nodeid+" [id^='pageNum-']").removeClass("disabled");
  115. $("#"+nodeid+" #pageNum-"+this.currentPage).addClass("disabled");
  116. if(this.currentPage == 1){
  117. $("#"+nodeid+" [id^='pageNum-']").addClass("hide");
  118. for(var i=1;i<=10;i++){
  119. if(i > this.totalPages){
  120. break;
  121. }
  122. $("#"+nodeid+" #pageNum-"+i).removeClass("hide");
  123. }
  124. }else if(this.currentPage >= 5){
  125. var start = this.currentPage-5;
  126. var end = this.currentPage+5;
  127. if(this.currentPage > this.totalPages - 5){
  128. start = this.totalPages - 10;
  129. end = this.totalPages;
  130. }
  131. for(var i=1;i<=start;i++){
  132. $("#"+nodeid+" #pageNum-"+i).addClass("hide");
  133. }
  134. for(var i=start+1;i<=end;i++){
  135. $("#"+nodeid+" #pageNum-"+i).removeClass("hide");
  136. }
  137. for(var i=end+1;i<=this.totalPages;i++){
  138. $("#"+nodeid+" #pageNum-"+i).addClass("hide");
  139. }
  140. }
  141. this.getDatas();
  142. }
  143. //从服务端获取数据
  144. this.getDatas = function(){
  145. if(datas == null){
  146. datas = {};
  147. }
  148. datas["pageSize"] = pageSize;
  149. datas["currentPage"] = this.currentPage;
  150. var thisClass = this;
  151. if(typeof(this.firstPageDatas) != "undefined" && this.firstPageDatas != null){
  152. if(this.totalPages == 0){
  153. this.count = this.firstPageDatas.count;
  154. this.init();
  155. }
  156. callBack(this.firstPageDatas.list);
  157. }else{
  158. $.post(url,datas,function(r){
  159. if(thisClass.totalPages == 0){
  160. thisClass.count = r.count;
  161. thisClass.init();
  162. }
  163. callBack(r.list);
  164. });
  165. }
  166. }
  167. //是否有上一页
  168. this.hasPrevPage = function(){
  169. if(this.currentPage > 1){
  170. return true;
  171. }
  172. return false;
  173. }
  174. //是否有下一页
  175. this.hasNextPage = function(){
  176. if(this.currentPage < this.totalPages){
  177. return true;
  178. }
  179. return false;
  180. }
  181. //第一次获取数据和总数
  182. this.getDatas();
  183. }