js实现表格分页

来源：互联网发布：互联网装修知乎编辑：程序博客网时间：2024/06/05 19:59

<%@ 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跟代码传到资源了，可点击下载

阅读全文

0 0