console 命令行工具 X clear

console

;(function($){
   $.fn.page = function(options){
       var defaults = {
           pageNo: 1,  //当前页
           totalPage: 10, //页码(总页数)
           tatalSize: 300, //总信息数
       }
       var setting = $.extend({},options,setting)
    //    自动生成页码
       function creatPage(that){
           var html = "";
           html+= '<a class="firstPage">首页</a><a class="prePage">上一页</a>'
           for(var i = 1; i <= setting.totalPage; i++){
               if(i == setting.pageNo){
                   html+='<a class="active">'+ i +'</a>'
               }else{
                   html+='<a>'+ i +'</a>'
               }
           }
           html+= '<a class="nextPage">下一页</a><a class="endPage">尾页</a>'
           html+= '<span>共'+ setting.totalPage +'页</span><span>共'+ setting.tatalSize +'条记录</span>'
           that.html(html)
       }
       creatPage(this)
   }
})(jQuery);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>分页插件</title> 
</head>
<style>
    *{
        margin: 0;
        padding: 0
    }
    .container{
        margin-top: 10px;
        margin-left: 10px
    }
    .container a{
        display: inline-block;
        min-width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #ccc
    }
    .container .active{
        background-color: 	#00BFFF;
        opacity: 0.7;
        color: #fff
    }
</style>
<body>
<div class="container">
    <a class="firstPage">首页</a>
    <a class="prePage">上一页</a>
    <a class="active">1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a>6</a>
    <a>7</a>
    <a>8</a>
    <a>9</a>
    <a>10</a>
    <a class="nextPage">下一页</a>
    <a class="endPage">尾页</a>
    <span>共10页</span>
    <span>共300条记录</span>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
     $(".container").page()
</script>
</html>