JS 客户端 兑现 无刷新分页 table表格实例
日期：2014-05-16 浏览次数：20420 次
JS 客户端 实现 无刷新分页 table表格实例
问题：
实现如下功能需求
?
1.table 按行数 分页
2.js 实现客户端无刷新效果
3.分页脚注 比较美观
4.可扩展 维护性比较好
<html version="-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<style type="text/css">
.pg-normal {
color: black;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.pg-selected {
color: black;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
</style>
<script type="text/javascript" src="paging.js"></script>
</head>
<body>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<table id="results">
<tr>
<th>#</th>
<th>field</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="field-name" value="rec1"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="field-name" value="rec2"></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="field-name" value="rec3"></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="field-name" value="rec4"></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="field-name" value="rec5"></td>
</tr>
<tr>
<td>6</td>
<td><input type="text" name="field-name" value="rec6"></td>
</tr>
<tr>
<td>7</td>
<td><input type="text" name="field-name" value="rec7"></td>
</tr>
<tr>
<td>8</td>
<td><input type="text" name="field-name" value="rec8"></td>
</tr>
<tr>
<td>9</td>
<td><input type="text" name="field-name" value="rec9"></td>
</tr>
<tr>
<td>10</td>
<td><input type="text" name="field-name" value="rec10"></td>
</tr>
</table>
<div id="pageNavPosition"></div>
<div><input type="submit" onclick="alert('Hey, this is just a sample!'); return false;" /> <input type="reset" /></div>
</form>
<script type="text/javascript"><!--
var pager = new Pager('results', 3);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
