欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

基于jquery编写分页插件_jquery

程序员文章站 2022-03-21 17:55:51
...
扩展JQuery很容易,作为一个练习,编写一个简单的分页插件,代码量不大,直接看代码好了:
$.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=numPages()) currPage = numPages()-1; 
        render(); 
  
        $('img.page-wait',panel).attr('src','images/wait.gif'); 
        opts.callback(currPage+1); 
        $('img.page-wait',panel).attr('src','images/nowait.gif'); 
      } 
    } 
     
    function render(){ 
  
      var html = '
' +'' +'' +'' +'' +'' +'' +'' +'
基于jquery编写分页插件_jquery基于jquery编写分页插件_jquery页/共'+numPages()+'页基于jquery编写分页插件_jquery基于jquery编写分页插件_jquery基于jquery编写分页插件_jquery检索到'+totalProperty+'记录
'; 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

下面测试一下:

 
   

运行效果图如下:

基于jquery编写分页插件_jquery

以上就是本文的全部内容,希望对大家的学习有所帮助。