基于jquery编写分页插件

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

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/nowait.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/nowait.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){ 
    imgFirst = 'images/page-first.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-first',panel) 
    .bind('click',selectPage(0)) 
    .attr('src',imgFirst);  
  $('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(); 

});
}

下面测试一下：

运行效果图如下：