这么多年了，今天用JS写了段分页代码。

时间有些忙，直接 贴底码。
当前显示的size 与 数据列表一页显示的数据条数不是一会事儿，这里是分页显示的码数数量。
显示容器：

<div class="pages" id="pagesforstyle1">	

JS代码，该页面是基于 有效云开发平台，获取后台数据比较容易。
调试代码，不喜可喷

<script>
        //pages：参数返回数据类型统一为字符串，转换为数字  
        var size  = 10;
        var vstr  ='';
        var total = parseInt({{$.pages.total}});
        var wTotal = Math.ceil(total/size);        
        var p     = parseInt({{$.p}});//(parseInt({{$.p}})>total) ? total :parseInt({{$.p}});        
        var first,  last,  pre, next;
        var wNum = Math.ceil( p / size);
        
        
        console.log("total:",total);        
        console.log("size:",size);   
        
        console.log("p:",p);
        console.log("wNum:",wNum);
        
        if ( (p > total) || (p < 1) ) {
            vstr = '<a href="{{.sub_item.url}}"  class="a1">返回</a>';
        } else {
        
        // p in [1 - total]
        first = (wNum-1) * size + 1;

        last  = (wNum * size ) > total ? total : wNum * size;   
            
        pre   = (p > 1) ?  p-1 : 1;
        
        next  = (p < total) ? p+1 : total;          
 
        
        console.log("first:",first);        
        console.log("last:",last);        
        console.log("pre:",pre);        
        console.log("next:",next);
            
        if( total > 1 ){
            
            //首页 上一页 <a href="{{.sub_item.url}}"  class="a1">首页</a><a class="a1" style="color:gray;">首页</a> 
            if( p > 1){
                 vstr  += '<a href="{{.sub_item.url}}?p='+pre+'" class="a1">上一页</a>';
            } else {
                 vstr  += '<a class="a1">上一页</a>';
            }                   
            
                    for(i=0;i < last-first+1;i++){
                        
                        var show_num = first + (i);
                        
                        if( p == show_num ){
                             vstr  += '<a href="{{$.sub_item.url}}?p='+ show_num +'" style="background: #2da0f0">'+ show_num +'</a>';
                            }else{
                             vstr  += '<a href="{{$.sub_item.url}}?p='+ show_num +'">'+ show_num +'</a>';
                        }
                    }
            
           //尾页 下一页   <a href="{{.sub_item.url}}?p='+total+'">尾页</a> <a  class="a1" style="color:gray;">尾页</a>
            if(p < total){
                 vstr  += '<a href="{{.sub_item.url}}?p='+next+'">下一页</a>';
            } else {
                 vstr  += '<a  class="a1">下一页</a>';
            }           
           }
       }
       document.getElementById("pagesforstyle1").innerHTML = vstr;  
    </script>   

效果：
当前

下一页

上一页