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

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

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()

}

类似#home这种链接是在一个页面内的跳转,跳转到的位置我们称之为“锚点”。

下面的代码存到index.html即可查看效果

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div style="position: fixedtop: 0left: 0background-color: #fff">

<a href="#home">首页</a>

<a href="#page2">page2</a>

<a href="#page3">page3</a>

</div>

<div style="height: 800pxborder: 1px solid #dddpadding-top: 35px">

<a id="home"></a>

<br><br>

这里是首页部分

</div>

<div style="height: 800pxborder: 1px solid #dddpadding-top: 35px">

<a id="page2"></a>

<br><br>

这里是page2部分

</div>

<div style="height: 1000pxborder: 1px solid #dddpadding-top: 35px">

<a id="page3"></a>

<br><br>

这里是page3部分

</div>

</body>

</html>

额。。。。做分页应该是直接从数据库那里拿数据的时候做的吧,你是全写静态了?反正我做的是数据库sql语句读数据库的时候读出多少到多少的,也就是比如第二页就是输出第21-40条这种,所以没这个问题,只要传一个请求的页码和搜索的条件就好,然后如果读不出数据就显示另一个页码,比如您查找的东西没找到啥米的。。。。

你这个的话,要不就是先判断下是否存在那个文件,如果不存在就跳转到目录。。。。

你看下这个:http://blog.csdn.net/foart/article/details/3984928


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7080349.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存