jquery怎样做出分页效果

nbsp;html> 
 
 
<meta> 
<title>简单的jQuery分页插件</title> 
<style> 
*{ margin:0; padding:0; list-style:none;} 
a{ text-decoration:none;} 
a:hover{ text-decoration:none;} 
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} 
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} 
</style> 
 
 
<br><br><br> 
<p></p> 
<center><pre class="brush:php;toolbar:false"><br> 

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});

(function($){ 
  var ms = { 
    init:function(obj,args){ 
      return (function(){ 
        ms.fillHtml(obj,args); 
        ms.bindEvent(obj,args); 
      })(); 
    }, 
    //填充html 
    fillHtml:function(obj,args){ 
      return (function(){ 
        obj.empty(); 
        //上一页 
        if(args.current > 1){ 
          obj.append('<a>上一页</a>'); 
        }else{ 
          obj.remove('.prevPage'); 
          obj.append('<span>上一页</span>'); 
        } 
        //中间页码 
        if(args.current != 1 &amp;&amp; args.current &gt;= 4 &amp;&amp; args.pageCount != 4){ 
          obj.append('<a>'+1+'</a>'); 
        } 
        if(args.current-2 &gt; 2 &amp;&amp; args.current  5){ 
          obj.append('<span>...</span>'); 
        } 
        var start = args.current -2,end = args.current+2; 
        if((start &gt; 1 &amp;&amp; args.current  args.pageCount-4 &amp;&amp; args.current &gt;= args.pageCount){ 
          start--; 
        } 
        for (;start = 1){ 
            if(start != args.current){ 
              obj.append('<a>'+ start +'</a>'); 
            }else{ 
              obj.append('<span>'+ start +'</span>'); 
            } 
          } 
        } 
        if(args.current + 2 = 1 &amp;&amp; args.pageCount &gt; 5){ 
          obj.append('<span>...</span>'); 
        } 
        if(args.current != args.pageCount &amp;&amp; args.current '+args.pageCount+''); 
        } 
        //下一页 
        if(args.current 下一页'); 
        }else{ 
          obj.remove('.nextPage'); 
          obj.append('<span>下一页</span>'); 
        } 
      })(); 
    }, 
    //绑定事件 
    bindEvent:function(obj,args){ 
      return (function(){ 
        obj.on("click","a.tcdNumber",function(){ 
          var current = parseInt($(this).text()); 
          ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current); 
          } 
        }); 
        //上一页 
        obj.on("click","a.prevPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current-1); 
          } 
        }); 
        //下一页 
        obj.on("click","a.nextPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current+1); 
          } 
        }); 
      })(); 
    } 
  } 
  $.fn.createPage = function(options){ 
    var args = $.extend({ 
      pageCount : 10, 
      current : 1, 
      backFn : function(){} 
    },options); 
    ms.init(this,args); 
  } 
})(jQuery);