前端动态分页一条龙（JQuery +css +html）

1、html代码

<div class="center">
	<div class="page_num"> 每页显示条数：<input type="text" id="page_size"     value="15">（最大条数不超过100）
        </div>
	<ul class="pagination">
	    
	</ul>
</div>

2、css代码

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

3、JQuery代码

//动态添加分页的页码
//page_num 当前页码
//page_total 总页数
function loadPage(page_num,page_total){
	 var i = 1;
         i = parseInt(i);
         page_num=parseInt(page_num);
         page_total=parseInt(page_total);
         var html_li="";
         html_li+=' <li><a href="#" onclick="goExPage()">«</a></li>';
         $(".pagination").empty();
         if (page_total <= 5 ) {//总页数小于五页，则加载所有页
				for(i;i<=page_total;i++){
					if(i==page_num){
						html_li+=' <li data="'+i+'"><a class="active" href="#" onclick="goPage(this)">'+i+'</a></li>';
					}else{
						html_li+='<li data="'+i+'"><a href="#" onclick="goPage(this)">'+i+'</a></li>';
					}
				}
				html_li+=' <li><a href="#"  onclick="goNextPage()">»</a></li>';
				$(".pagination").append(html_li);
             return;
         }else if (page_total > 5) {//总页数大于五页，则加载五页
             if (page_num < 5) {//当前页小于5，加载1-5页
                 for (i; i <= 5; i++) {
                     if (i == page_num) {
                    	 html_li+=' <li data="'+i+'"><a class="active" href="#" onclick="goPage(this)">'+i+'</a></li>'; 
                     }else{
 						html_li+='<li data="'+i+'"><a href="#" onclick="goPage(this)">'+i+'</a></li>';
 					}
                 }
                 if (page_num <= page_total-2) {//最后一页追加“...”代表省略的页
                     html_li += "<span> . . . </span>";
                 }
               	 for(i = page_total-1; i <= page_total; i++){//...后面跟三个页码当前页居中显示
                   	 html_li+='<li data="'+i+'"><a href="#" onclick="goPage(this)">'+i+'</a></li>';
                 }
                 
                 html_li+=' <li><a href="#" onclick="goNextPage()">»</a></li>';
                 $(".pagination").append(html_li);
                 return;
             }else if (page_num >= 5) {//当前页大于5页
                 for (i; i <= 2; i++) {//1,2页码始终显示
                	 html_li+='<li data="'+i+'"><a href="#" onclick="goPage(this)">'+i+'</a></li>';
                 }
                 html_li += "<span> . . . </span>";//2页码后面用...代替部分未显示的页码
                 if (page_num+1 == page_total) {//当前页+1等于总页码
                     for(i = page_num-1; i <= page_total; i++){//“...”后面跟三个页码当前页居中显示
                    	 if (i == page_num) {
                        	 html_li+=' <li data="'+i+'"><a class="active" href="#" onclick="goPage(this)">'+i+'</a></li>'; 
                         }else{
     						html_li+='<li data="'+i+'"><a href="#" onclick="goPage(this)">'+i+'</a></li>';
     					}
                     }
                 }else if (page_num == page_total) {//当前页数等于总页数则是最后一页页码显示在最后
                     for(i = page_num-2; i <= page_total; i++){//...后面跟三个页码当前页居中显示
                    	 if (i == page_num) {
                        	 html_li+=' <li data="'+i+'"><a class="active" href="#" onclick="goPage(this)">'+i+'</a></li>'; 
                         }else{
     						html_li+='<li data="'+i+'"><a href="#" onclick="goPage(this)">'+i+'</a></li>';
     					}
                     }
                 }else{//当前页小于总页数，则最后一页后面跟...
                     for(i = page_num-1; i <= page_num+1; i++){//page_num+1页后面...
                    	 if (i == page_num) {
                        	 html_li+=' <li data="'+i+'"><a class="active" href="#" onclick="goPage(this)">'+i+'</a></li>'; 
                         }else{
     						html_li+='<li data="'+i+'"><a href="#" onclick="goPage(this)">'+i+'</a></li>';
     					}
                     }
                     html_li += "<span> . . . </span>";
                     if(page_num+2<page_total){
                    	 for(i = page_total-1; i <= page_total; i++){//...后面跟三个页码当前页居中显示
                        	 html_li+='<li data="'+i+'"><a href="#" onclick="goPage(this)">'+i+'</a></li>';
                         }
                     }
                 }
                 html_li+=' <li><a href="#" onclick="goNextPage()">»</a></li>';
                 $(".pagination").append(html_li);
                 return;
             }
         }
	}

效果图（样式可参考菜鸟教程：菜鸟分页页码样式）