我想做客户端分页并按照建议使用 Jquery 建议 here . 使用该脚本几乎没有问题。无论我们在分页器 div 上设置什么位置,分页图标总是出现在底部。另外,我的表有一些数据大小不一致,因此页面之间的大小可能不同。因为其中,表格大小变化很大,但寻呼机保持固定,导致重叠。我尝试使用 div 进行 serperate,但没有用。这是我的寻呼机代码
<div id="pager" class="pager">
<form>
<img src="../addons/pager/icons/first.png" class="first"/>
<img src="../addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="../addons/pager/icons/next.png" class="next"/>
<img src="../addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
这是我的 Jquery 脚本
<script type="text/javascript">
$(function() {
$(theTable)
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
</script>
我的表 ID 是 theTable。
我想将分页代码放在顶部,这样我的表格大小就不会影响分页图标。
最佳答案
DataTables 上有很多示例可用你可以download示例以及它所需的 css 和 javascripts...
初始化也很容易,这里有一个代码示例:
在顶部添加所需的 css 和 js(在下载的 zip 文件中可用)
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
id为'theTable'的表
<table cellpadding="0" cellspacing="0" border="0" class="display" id="theTable">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
</tbody>
现在通过以下方式初始化数据表:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#theTable').dataTable();
} );
</script>
这将使用零配置初始化数据表....
要设置分页的位置使用sDom特性
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
注意字母 lfr, t,ip 它们代表:
'l' - 长度变化 'f' - 过滤输入 't' - table ! 'i' - 信息 'p' - 分页 'r' - 处理
只需交换这些字母的位置,然后通过 p 将它们放在你想要的位置 r/l
关于javascript - 客户端分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5482302/