原生js实现动态表格分页(封装版)

之前一直用的插件做表格分页，但是不同的场景用到的情况都不同，所以索性用个原生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;//结束显示的行   40endRow = (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);}

原生js实现动态表格分页(封装版)相关推荐

JS表格分页(封装版)
HTML代码: <html> <head><meta charset='utf-8'> <script type="text/javascript& ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
基于vis.js的动态流量的封装
分享关于vis.js的动态流量的封装,是基于网上在github中vis.js的issues一位大神分享的代码的基础上继续做了部分改动封装效果是一个小球在需要动态流量的连接线上滚动,颜色大小方向都可以 ...
html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
vue横向树结构_基于vue.js实现树形表格的封装
基于vue.js实现树形表格的封装(vue-tree-table) 前言由于公司产品(基于vue.js)需要,要实现一个树形表格的功能,百度.google找了一通,并没有发现很靠谱的,也不是很灵活.所 ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
原生js实现table表格的各行变色功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JS生成动态表格并为每个单元格添加单击事件的方法
<html><head><title>Demo</title><script>function getColumnDetail(column ...

原生js实现动态表格分页(封装版)

原生js实现动态表格分页(封装版)相关推荐

最新文章

热门文章