基于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(); 

});
}

下面测试一下:

运行效果图如下:

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

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...