代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js翻页表格</title>
<meta charset="utf-8" />
<meta name="author" content="http://www.dreamload.cn" />
<style>
* {
margin: 0;
padding: 0;
outline: 0;
}
body {
font: 11px Verdana, Arial;
margin: 25px;
background: #fff url(../images/bg.gif) repeat-x;
}
#tablewrapper {
width: 980px;
margin: 0 auto;
}
#tableheader {
height: 55px;
}
.search {
float: left;
padding: 6px;
border: 1px solid #c6d5e1;
background: #fff;
}
#tableheader select {
float: left;
font-size: 12px;
width: 125px;
padding: 2px 4px 4px;
}
#tableheader input {
float: left;
font-size: 12px;
width: 225px;
padding: 2px 4px 4px;
margin-left: 4px;
}
.details {
float: right;
padding-top: 12px;
}
.details div {
float: left;
margin-left: 15px;
font-size: 12px;
}
.tinytable {
width: 979px;
border-left: 1px solid #c6d5e1;
border-top: 1px solid #c6d5e1;
border-bottom: none;
}
.tinytable th {
background: url(../images/header-bg.gif);
text-align: left;
color: #cfdce7;
border: 1px solid #fff;
border-right: none;
}
.tinytable th h3 {
font-size: 10px;
padding: 6px 8px 8px;
}
.tinytable td {
padding: 4px 6px 6px;
border-bottom: 1px solid #c6d5e1;
border-right: 1px solid #c6d5e1;
}
.tinytable .head h3 {
background: url(../images/sort.gif) 7px center no-repeat;
cursor: pointer;
padding-left: 18px;
}
.tinytable .desc, .sortable .asc {
background: url(../images/header-selected-bg.gif);
}
.tinytable .desc h3 {
background: url(../images/desc.gif) 7px center no-repeat;
cursor: pointer;
padding-left: 18px;
}
.tinytable .asc h3 {
background: url(../images/asc.gif) 7px center no-repeat;
cursor: pointer;
padding-left: 18px;
}
.tinytable .head:hover, .tinytable .desc:hover, .tinytable .asc:hover {
color: #fff;
}
.tinytable .evenrow td {
background: #fff;
}
.tinytable .oddrow td {
background: #ecf2f6;
}
.tinytable td.evenselected {
background: #ecf2f6;
}
.tinytable td.oddselected {
background: #dce6ee;
}
.tinytable tfoot {
background: #fff;
font-weight: bold;
}
.tinytable tfoot td {
padding: 6px 8px 8px;
}
#tablefooter {
height: 15px;
margin-top: 20px;
}
#tablenav {
float: left;
}
#tablenav img {
cursor: pointer;
}
#tablenav div {
float: left;
margin-right: 15px;
}
#tablelocation {
float: right;
font-size: 12px;
}
#tablelocation select {
margin-right: 3px;
}
#tablelocation div {
float: left;
margin-left: 15px;
}
.page {
margin-top: 2px;
font-style: italic;
}
#selectedrow td {
background: #c6d5e1;
}
</style>
</head>
<body>
<div id="tablewrapper">
<div id="tableheader">
<div class="search">
<select id="columns" onchange="sorter.search('query')"></select>
<input type="text" id="query" placeholder="在这里搜索..." onkeyup="sorter.search('query')" />
</div>
<span class="details">
<span>搜索日程：<span id="startrecord"></span>-<span id="endrecord"></span> 共 <span id="totalrecords"></span>条</span>
<span><a href="javascript:sorter.reset()">重置</a></span>
</span>
</div>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="tinytable">
<thead>
<tr>
<th class="nosort"><h3>序号</h3></th>
<th><h3>姓名</h3></th>
<th><h3>电话</h3></th>
<th><h3>邮箱</h3></th>
<th><h3>出生日期</h3></th>
<th><h3>薪水</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张友鹏</td>
<td>(627) 536-4760</td>
<td><a href="mailto:#">tortor@est.ca</a></td>
<td>12/02/1962</td>
<td>$73,229</td>
</tr>
<tr>
<td>2</td>
<td>闫杰</td>
<td>(921) 943-5780</td>
<td><a href="mailto:#">in@elementum.org</a></td>
<td>06/03/1957</td>
<td>$130,752</td>
</tr>
<tr>
<td>3</td>
<td>宝玉</td>
<td>(835) 361-5993</td>
<td><a href="mailto:#">arcu.ac@disse.ca</a></td>
<td>10/15/1983</td>
<td>$48,684</td>
</tr>
<tr>
<td>4</td>
<td>何明帅</td>
<td>(605) 803-1561</td>
<td><a href="mailto:#">at.risus.Nunc@ipsum.com</a></td>
<td>07/30/1982</td>
<td>$7,023</td>
</tr>
<tr>
<td>5</td>
<td>张姗</td>
<td>(666) 569-9894</td>
<td><a href="mailto:#">non@Proin.ca</a></td>
<td>09/27/1986</td>
<td>$69,875</td>
</tr>
<tr>
<td>6</td>
<td>华晨宇</td>
<td>(771) 294-6690</td>
<td><a href="mailto:#">Aenean.sed@elit.ca</a></td>
<td>10/23/1970</td>
<td>$113,763</td>
</tr>
<tr>
<td>7</td>
<td>李明依</td>
<td>(851) 784-4129</td>
<td><a href="mailto:#">nunc.nulla@vel.com</a></td>
<td>12/22/1972</td>
<td>$130,248</td>
</tr>
<tr>
<td>8</td>
<td>张一山</td>
<td>(810) 652-6704</td>
<td><a href="mailto:#">dis@duinec.ca</a></td>
<td>10/26/1973</td>
<td>$73,197</td>
</tr>
<tr>
<td>9</td>
<td>何明哲</td>
<td>(850) 562-3177</td>
<td><a href="mailto:#">elit@dolor.com</a></td>
<td>07/20/1985</td>
<td>$63,736</td>
</tr>
<tr>
<td>10</td>
<td>方可日</td>
<td>(378) 371-0559</td>
<td><a href="mailto:#">turpis.Nulla@ac.edu</a></td>
<td>03/29/1970</td>
<td>$2,868</td>
</tr>
<tr>
<td>11</td>
<td>斐东来</td>
<td>(465) 520-1801</td>
<td><a href="mailto:#">nunc.ac.mattis@enim.com</a></td>
<td>08/10/1963</td>
<td>$126,469</td>
</tr>
<tr>
<td>12</td>
<td>杨明</td>
<td>(992) 962-9419</td>
<td><a href="mailto:#">amet.ante@lentesque.edu</a></td>
<td>08/12/1971</td>
<td>$142,448</td>
</tr>
<tr>
<td>13</td>
<td>薛洋</td>
<td>(585) 210-0390</td>
<td><a href="mailto:#">eu@Integer.com</a></td>
<td>07/11/1968</td>
<td>$40,267</td>
</tr>
<tr>
<td>14</td>
<td>斩梦</td>
<td>(489) 101-5447</td>
<td><a href="mailto:#">rutrum.non.hendrerit@iaculis.org</a></td>
<td>04/11/1970</td>
<td>$99,686</td>
</tr>
<tr>
<td>15</td>
<td>周蕙</td>
<td>(934) 692-7294</td>
<td><a href="mailto:#">erat.in.conetuer@pedenout.org</a></td>
<td>06/10/1957</td>
<td>$112,997</td>
</tr>
<tr>
<td>16</td>
<td>李明达</td>
<td>(806) 835-7035</td>
<td><a href="mailto:#">vel.sapien@mi.ca</a></td>
<td>02/09/1989</td>
<td>$5,282</td>
</tr>
<tr>
<td>17</td>
<td>郭爱华</td>
<td>(859) 974-4442</td>
<td><a href="mailto:#">adipiscing.ligula@aretraNam.edu</a></td>
<td>02/14/1990</td>
<td>$103,999</td>
</tr>
<tr>
<td>18</td>
<td>苏灿</td>
<td>(673) 147-0443</td>
<td><a href="mailto:#">Cras@Vestibulumant.edu</a></td>
<td>04/14/1981</td>
<td>$37,014</td>
</tr>
<tr>
<td>19</td>
<td>张丽</td>
<td>(340) 430-0424</td>
<td><a href="mailto:#">tincidunt@vurmagna.com</a></td>
<td>11/06/1959</td>
<td>$104,149</td>
</tr>
<tr>
<td>20</td>
<td>郝文杰</td>
<td>(291) 455-8520</td>
<td><a href="mailto:#">massa.rutrum@Nullamlob.ca</a></td>
<td>09/09/1970</td>
<td>$31,090</td>
</tr>
<tr>
<td>21</td>
<td>李亚鹏</td>
<td>(142) 520-1128</td>
<td><a href="mailto:#">Etiam.laoreet@velit.org</a></td>
<td>04/25/1971</td>
<td>$44,641</td>
</tr>
<tr>
<td>22</td>
<td>何华</td>
<td>(126) 374-6078</td>
<td><a href="mailto:#">Integer.in.magna@ntumcollis.edu</a></td>
<td>01/23/1984</td>
<td>$46,450</td>
</tr>
<tr>
<td>23</td>
<td>史珍香</td>
<td>(687) 483-9669</td>
<td><a href="mailto:#">in@adipiscing.edu</a></td>
<td>03/17/1977</td>
<td>$51,754</td>
</tr>
<tr>
<td>24</td>
<td>蒋敬</td>
<td>(422) 644-3488</td>
<td><a href="mailto:#">nec.luctus@ornarefacilisis.com</a></td>
<td>12/01/1981</td>
<td>$46,672</td>
</tr>
<tr>
<td>25</td>
<td>党代表</td>
<td>(438) 395-9392</td>
<td><a href="mailto:#">nibh.vulputate@necelendnon.org</a></td>
<td>07/01/1980</td>
<td>$32,193</td>
</tr>
<tr>
<td>26</td>
<td>党振星</td>
<td>(963) 652-2643</td>
<td><a href="mailto:#">Sed.neque@Duis.org</a></td>
<td>01/19/1986</td>
<td>$96,995</td>
</tr>
<tr>
<td>27</td>
<td>马尚华</td>
<td>(294) 644-5306</td>
<td><a href="mailto:#">tempus.mauris@elempurus.com</a></td>
<td>09/16/1988</td>
<td>$47,510</td>
</tr>
<tr>
<td>28</td>
<td>偶吧</td>
<td>(190) 189-1420</td>
<td><a href="mailto:#">orci.quis@auctor.com</a></td>
<td>08/03/1963</td>
<td>$36,286</td>
</tr>
<tr>
<td>29</td>
<td>冷风</td>
<td>(163) 780-6121</td>
<td><a href="mailto:#">mauris.a@Sedcongueelit.edu</a></td>
<td>03/08/1974</td>
<td>$124,913</td>
</tr>
<tr>
<td>30</td>
<td>刘泌</td>
<td>(304) 536-8850</td>
<td><a href="mailto:#">pellentesque@laoreet.org</a></td>
<td>08/16/1978</td>
<td>$28,057</td>
</tr>
<tr>
<td>31</td>
<td>华凤杰</td>
<td>(272) 171-5731</td>
<td><a href="mailto:#">felis@Donecfeugiat.ca</a></td>
<td>12/10/1988</td>
<td>$100,959</td>
</tr>
<tr>
<td>32</td>
<td>郭友东</td>
<td>(608) 893-4909</td>
<td><a href="mailto:#">malesuada.fames@dui.edu</a></td>
<td>07/23/1959</td>
<td>$87,972</td>
</tr>
<tr>
<td>33</td>
<td>程大聪</td>
<td>(937) 368-5946</td>
<td><a href="mailto:#">sociis.natoque@myipsum.org</a></td>
<td>09/13/1980</td>
<td>$51,217</td>
</tr>
<tr>
<td>34</td>
<td>陈小胖</td>
<td>(832) 581-6953</td>
<td><a href="mailto:#">libero@Infaucibus.com</a></td>
<td>04/19/1980</td>
<td>$120,374</td>
</tr>
<tr>
<td>35</td>
<td>冯小刚</td>
<td>(332) 888-8768</td>
<td><a href="mailto:#">congue@Nuncut.com</a></td>
<td>07/16/1974</td>
<td>$95,173</td>
</tr>
<tr>
<td>36</td>
<td>李冰</td>
<td>(961) 215-0426</td>
<td><a href="mailto:#">pharetra@rutrumFusce.edu</a></td>
<td>01/13/1962</td>
<td>$140,552</td>
</tr>
<tr>
<td>37</td>
<td>罗梅</td>
<td>(163) 580-2609</td>
<td><a href="mailto:#">Integer.aliquam@Sedetlibero.org</a></td>
<td>08/27/1967</td>
<td>$37,762</td>
</tr>
<tr>
<td>38</td>
<td>张紫妍</td>
<td>(976) 799-4111</td>
<td><a href="mailto:#">Proin@Donecelementum.org</a></td>
<td>01/02/1959</td>
<td>$32,371</td>
</tr>
<tr>
<td>39</td>
<td>王爱武</td>
<td>(798) 959-3321</td>
<td><a href="mailto:#">eget.dictum.placerat@idlibero.ca</a></td>
<td>11/27/1961</td>
<td>$77,847</td>
</tr>
<tr>
<td>40</td>
<td>王家国</td>
<td>(525) 353-2984</td>
<td><a href="mailto:#">a@diamnunc.com</a></td>
<td>10/02/1957</td>
<td>$75,654</td>
</tr>
<tr>
<td>41</td>
<td>王烨</td>
<td>(106) 260-1651</td>
<td><a href="mailto:#">pulvinar@Duisvolutpat.org</a></td>
<td>08/24/1964</td>
<td>$11,498</td>
</tr>
<tr>
<td>42</td>
<td>欧阳</td>
<td>(807) 487-5786</td>
<td><a href="mailto:#">a@interdumlibero.ca</a></td>
<td>10/10/1973</td>
<td>$137,743</td>
</tr>
<tr>
<td>43</td>
<td>何萌</td>
<td>(945) 481-7808</td>
<td><a href="mailto:#">laoreet.posuere@vallis.com</a></td>
<td>08/19/1962</td>
<td>$64,799</td>
</tr>
<tr>
<td>44</td>
<td>臧亚盟</td>
<td>(844) 314-8683</td>
<td><a href="mailto:#">fames@gravida.edu</a></td>
<td>12/01/1966</td>
<td>$99,927</td>
</tr>
<tr>
<td>45</td>
<td>刘妍杰</td>
<td>(814) 509-0367</td>
<td><a href="mailto:#">Cras.vulputate.velit@acusUt.com</a></td>
<td>10/23/1981</td>
<td>$36,618</td>
</tr>
<tr>
<td>46</td>
<td>郑爱华</td>
<td>(955) 748-1014</td>
<td><a href="mailto:#">fringilla@id.edu</a></td>
<td>10/29/1980</td>
<td>$19,325</td>
</tr>
<tr>
<td>47</td>
<td>冯晓</td>
<td>(107) 247-3380</td>
<td><a href="mailto:#">pellentesque@pedeultri.com</a></td>
<td>06/11/1963</td>
<td>$109,433</td>
</tr>
<tr>
<td>48</td>
<td>肖晓萧</td>
<td>(395) 200-9188</td>
<td><a href="mailto:#">ac@Quisque.edu</a></td>
<td>08/04/1976</td>
<td>$3,246</td>
</tr>
<tr>
<td>49</td>
<td>邓珍</td>
<td>(259) 659-7498</td>
<td><a href="mailto:#">tincidunt.vehicula@ura.com</a></td>
<td>12/31/1961</td>
<td>$67,319</td>
</tr>
</tbody>
</table>
<div id="tablefooter">
<div id="tablenav">
<div>
<img src="../images/first.gif" width="16" height="16" alt="首页" onclick="sorter.move(-1,true)" />
<img src="../images/previous.gif" width="16" height="16" alt="上一页" onclick="sorter.move(-1)" />
<img src="../images/next.gif" width="16" height="16" alt="下一页" onclick="sorter.move(1)" />
<img src="../images/last.gif" width="16" height="16" alt="尾页" onclick="sorter.move(1,true)" />
</div>
<div>
<select id="pagedropdown"></select>
</div>
<div>
<a href="javascript:sorter.showall()">显示全部</a>
</div>
</div>
<div id="tablelocation">
<div>
<span>每页显示</span>
<select onchange="sorter.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>条</span>
</div>
<div class="page">共 <span id="currentpage"></span> 到 <span id="totalpages"></span>页</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/tablepageturning.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter', 'table', {
headclass: 'head',
ascclass: 'asc',
descclass: 'desc',
evenclass: 'evenrow',
oddclass: 'oddrow',
evenselclass: 'evenselected',
oddselclass: 'oddselected',
paginate: true,
size: 10,
colddid: 'columns',
currentid: 'currentpage',
totalid: 'totalpages',
startingrecid: 'startrecord',
endingrecid: 'endrecord',
totalrecid: 'totalrecords',
hoverid: 'selectedrow',
pageddid: 'pagedropdown',
navid: 'tablenav',
sortcolumn: 1,
sortdir: 1,
sum: [8],
avg: [6, 7, 8, 9],
columns: [{ index: 7, format: '%', decimals: 1 }, { index: 8, format: '$', decimals: 0 }],
init: true
});
</script>
</body>
</html>
代码非原创，在此仅作分享，没有任何商业目的！!!
您可以选择一种方式赞助本站
支付宝赞助
