在html中分页加查询打卡信息条件前端怎么写

html 前端分页代码怎么写,纯JavaScript实现的前端分页代码 转载

2021-06-19 11:07:20

守望之鹰

码龄3年

关注

最近我遇到问题，就是控制table表格的行不要太长，这里最简单方便的方法就是用前端分页，控制表格显示的行数，在网上找了一番，终于找到一个比较合适的前端分页代码。示例如下：

html代码：

//全局变量

var numCount//数据总数量

var columnsCounts//数据列数量

var pageCount//每页显示的数量

var pageNum//总页数

var currPageNum //当前页数

//页面标签变量

var blockTable

var preSpan

var firstSpan

var nextSpan

var lastSpan

var pageNumSpan

var currPageSpan

window.οnlοad=function(){

//页面标签变量

blockTable = document.getElementById("blocks")

preSpan = document.getElementById("spanPre")

firstSpan = document.getElementById("spanFirst")

nextSpan = document.getElementById("spanNext")

lastSpan = document.getElementById("spanLast")

pageNumSpan = document.getElementById("spanTotalPage")

currPageSpan = document.getElementById("spanPageNum")

numCount = document.getElementById("blocks").rows.length - 1//取table的行数作为数据总数量(减去标题行1)

alert(numCount)

columnsCounts = blockTable.rows[0].cells.length

pageCount = 5

pageNum = parseInt(numCount/pageCount)

if(0 != numCount%pageCount){

pageNum += 1

}

firstPage()

}

说明：

①纯前端多条件查询，不涉及后端请求

②可多条件精确匹配和单个条件模糊匹配（或则多个条件模糊匹配）

③不懂看看注释

转自： 前端多条件查询数据处理

以最新条件查询。把制成表，以表显示容器里面装载着文字或图表的一种形式，叫列表，列表最大的特点就是整齐、整洁、有序，前端列表在查询有条件，新增完以后没问题可以以最新条件查询。在输入内容后，直接点击页码跳转，保持最新的条件进行查询。

---