基于jquery编写分页插件

扩展JQuery很容易，作为一个练习，编写一个简单的分页插件，代码量不大，直接看代码好了：

rush:js;"> $.fn.mypagination = function(totalProperty,opts){ opts = $.extend({ perPage:10,callback:function(){ } },opts||{});

return this.each(function(){
function numPages(){
return Math.ceil(totalProperty/opts.perPage);
}

function selectPage(page){ 
  return function(){ 
    currPage = page; 
    if (page<0) currPage = 0; 
    if (page>=numPages()) currPage = numPages()-1; 
    render(); 

    $('img.page-wait',panel).attr('src','images/wait.gif'); 
    opts.callback(currPage+1); 
    $('img.page-wait','images/<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>ait.gif'); 
  } 
} 

function render(){ 

  var html = '<table&gt;<tbody><tr&gt;'  
    +'<td&gt;<a href="#"&gt;<img class="page-first"&gt;</a></td&gt;' 
    +'<td&gt;<a href="#"&gt;<img class="page-prev"&gt;</a></td&gt;' 
    +'<td&gt;<span>第<input type="text" class="page-num"&gt;页/共'+numPages()+'页</span></td&gt;' 
    +'<td&gt;<a href="#"&gt;<img class="page-next"&gt;</a></td&gt;' 
    +'<td&gt;<a href="#"&gt;<img class="page-last"&gt;</a></td&gt;' 
    +'<td&gt;<img src="images/<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>ait.gif" class="page-wait"&gt;</td&gt;' 
    +'<td&gt;<span style="padding-left:50px;"&gt;检索到'+totalProperty+'记录</span></td&gt;' 
    +'</tr&gt;</tbody></table&gt;'; 
  var imgFirst = 'images/page-first-disabled.gif'; 
  var imgPrev = 'images/page-prev-disabled.gif'; 
  var imgNext = 'images/page-next-disabled.gif'; 
  var imgLast = 'images/page-last-disabled.gif'; 
  if (currPage > 0){ 
    imgF<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t = 'images/page-f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t.gif'; 
    imgPrev = 'images/page-prev.gif'; 
  } 
  if (currPage < numPages()-1){ 
    imgNext = 'images/page-next.gif'; 
    imgLast = 'images/page-last.gif'; 
  } 
  panel.empty(); 
  panel.append(html); 
  $('img.page-f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t',panel) 
    .bind('click',selectPage(0)) 
    .attr('src',imgF<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t);  
  $('img.page-prev',selectPage(currPage-1)) 
    .attr('src',imgPrev);   
  $('img.page-next',selectPage(currPage+1)) 
    .attr('src',imgNext);   
  $('img.page-last',selectPage(numPages()-1)) 
    .attr('src',imgLast); 
  $('input.page-num',panel) 
    .val(currPage+1) 
    .change(function(){ 
      selectPage($(this).val()-1)(); 
    }); 
} 

var currPage = 0; 
var panel = $(this); 
render(); 

});
}

下面测试一下：

rush:xhtml;">

运行效果图如下：

内容，希望对大家的学习有所帮助。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：不定义JQuery插件 不要说会JQuery下一篇：利用JQuery写一个简单的异步分页插