之前一直用的插件做表格分页，但是不同的场景用到的情况都不同，所以索性用个原生js搞一个封装好的。
后台动态获取数据进行渲染，等页面渲染成功之后在进行分页。数据的获取我用的vue，也可以用ajax等其他的，反正跟分页没多大关系，有一点就是分页函数必须在页面渲染之后执行。这里用到window.onload函数。
先看下效果，当不能点击时按钮显示为灰色。

样式自己写，我用的bootstrap的响应式表格。
html部分

<table class="table table-striped- table-bordered table-success table-hover "  >
		<thead class="text-center" style="background-color: #20C997;color: white;">
				<tr>
					<th ><b>字段主题</b></th>
					<th ><b>字段描述</b></th>
					<th ><b>字段名称</b></th>
					<th ><b>字段类型</b></th>
				</tr>
		</thead>
		<tbody id="idData">
				<tr v-for="(item,index) in data" :key='index'>
					<td >{{item.elclass}}</td>
					<td >{{item.eldesc}}</td>
					<td >{{item.elname}}</td>
					<td >{{item.eltype}}</td>
				</tr>
		</tbody>
</table>
<!--分页按钮区域-->
<div  align="center" >
	<div id="barcon" name="barcon" style="color: white;font-size: large;font-weight: bold;"></div>
</div>

注：id='idData'加在tbody上，不然会将头也算在数据num里，点击下一页的时候会跟着分页。

js部分

/**
 * 2019/8/20更新
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 **/
function goPage(pno,psize){
    var itable = document.getElementById("idData");
    var num = itable.rows.length;//表格所有行数(所有记录数)
    //console.log(num);
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //总共分几页 
    if(num/pageSize > parseInt(num/pageSize)){   
            totalPage=parseInt(num/pageSize)+1;   
       }else{   
           totalPage=parseInt(num/pageSize);   
       }   
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31 
       var endRow = currentPage * pageSize;//结束显示的行   40
       endRow = (endRow > num)? num : endRow;    //40
      // console.log(endRow);
       //遍历显示数据实现分页
    for(var i=1;i<(num+1);i++){    
        var irow = itable.rows[i-1];
        if(i>=startRow && i<=endRow){
            irow.style.display = "table-row";    
			//irow.cells.style.width = "11%"; 
        }else{
            irow.style.display = "none";
			//irow.cells.style.width = "11%"; 
        }
    }
    //var pageEnd = document.getElementById("pageEnd");
    var tempStr = "共"+num+"条数据 分"+totalPage+"页 当前第"+currentPage+"页&nbsp;&nbsp;";
    if(currentPage>1){
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>&nbsp;&nbsp;";
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a>&nbsp;&nbsp;"
    }else{
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >首页</a>&nbsp;&nbsp;";
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >上一页</a>&nbsp;&nbsp;";   
    }

    if(currentPage<totalPage){
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a>&nbsp;&nbsp;";
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>&nbsp;&nbsp;";
    }else{
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >下一页</a>&nbsp;&nbsp;";
       tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >尾页</a>&nbsp;&nbsp;";   
    }
	
	tempStr +="跳转至";
	tempStr +="<select class='' style='width:60px' οnchange='goPage(this.value,"+psize+")'>"; 
	tempStr +="<option></option>"
	for(var j=1;j<=totalPage;j++){
		tempStr +="<option  value='"+j+"' >第"+ j +"页</option>";
	}
	tempStr +="</select>";
    document.getElementById("barcon").innerHTML = tempStr;
    
}

调用

<script type="text/javascript" language="javascript">
			window.onload = function() {  //页面加载完之后执行
				goPage(1, 10);  //1为当前页数，10为每页显示行数
			};
		</script>

更新（2019-8-20）
增加跳转至第几页。更新了js部分，看效果

注：若添加查询功能一定要在查询结束后在执行一次函数，否则num无法更新，如vue中
updated() {goPage(1, 10);}