js实现表格分页
程序员文章站
2024-01-13 22:09:16
...
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 分页插件 -->
<script type="text/javascript" src="js/fy.js"></script>
<title></title>
<script type="text/javascript" language="javascript">
window.onload = function(){
page = new Page(2,'edit','group_one'); };
</script>
<style type="text/css">
.common{
background-color: #EDFAFD;
font-family:"幼圆";
}
#border{
margin: 20px 50px 0;
}
/*-----表格-----*/
table{
text-align: center;
width: 100%;
border-collapse: collapse;
margin:0 auto;
border:1px solid gray;
}
table th{
color:black;
background-color: #C7EEF8;
height: 30px;
font-size: 17px;
}
table tr:nth-child(odd){
background: #FCF5F1; /*奇数行颜色*/
height: 28px;
}
table tr:nth-child(even){
background:#FFFFFF; /*偶数行颜色*/
height: 28px;
}
/*-----分页div-----*/
#border>div{
float: right;
margin-top:10px;
}
#border>div>a{
text-decoration: none;
}
</style>
</head>
<body class="common">
<div id="border">
<table id="edit">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
</tr>
</thead>
<tbody id="group_one">
<tr>
<td>aaaa</td>
<td>1</td>
<td>******</td>
</tr>
<tr>
<td>bbbb</td>
<td>2</td>
<td>******</td>
</tr>
<tr>
<td>cccc</td>
<td>3</td>
<td>******</td>
</tr>
<tr>
<td>dddd</td>
<td>4</td>
<td>******</td>
</tr>
</tbody>
</table>
<!-- 分页功能 -->
<div>
<!-- 第几页/共几页 -->
<span id="divFood"></span>
<a href="#" onclick="page.firstPage();"> << </a>
<a href="#" onclick="page.prePage();"> < </a>
<!-- 跳到指定页数方框 -->
<input id="pageno" value="1" style="width:20px;text-align: center;"/>
<a href="#" onclick="page.nextPage();"> > </a>
<a href="#" onclick="page.lastPage();"> >> </a>
<a href="#" onclick="page.aimPage();"><input type="button" value="跳转" class="tz"></a>
</div>
</div>
</body>
</html>js实现表格分页，可点击按钮跳转，也可输入页数跳转，效果如下：
博客貌似不能上传文件，所以js跟代码传到资源了，可点击下载
上一篇： 通过javascript修改class名字-学习笔记
下一篇： VueJs制作轮播组件