javascript 客户端分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5482302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Client side Pagination
提问by Harish
I want to do client side pagination and used the Jquery suggestion as suggested here. There are few issues in using that script.One the paging icons always come at the bottom no matter what we set the position on the pager div.Plus my table has some data size inconsistenzies and hence may have a varying size page to page.Because of this the table size varies drastically but the pager remains fixed casuing overlap.I tried div to serperate but of no use.Here is my pager code
我想做客户端分页，并按照此处的建议使用 Jquery 建议。使用该脚本时几乎没有问题。无论我们在分页器 div 上设置什么位置，分页图标总是位于底部。此外，我的表格有一些数据大小不一致，因此可能会有不同大小的页面。因为其中，表格大小变化很大，但寻呼机保持固定重叠。我尝试使用 div 进行锯齿化，但没有用。这是我的寻呼机代码
<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>
This is my Jquery script
这是我的 Jquery 脚本
<script type="text/javascript">
$(function() {
$(theTable)
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
</script>
My table id is theTable.
我的表 ID 是 theTable。
I want to place the pager code to come at the top so that the size of my table does not affect the pagination icons.
我想将寻呼机代码放在顶部，以便表格的大小不会影响分页图标。
采纳答案by Sangeet Menon
The are lots of examples available on DataTablesyou can downloadthe examples along with the css and the javascripts required for it...
DataTables上有很多示例，您可以下载示例以及它所需的 css 和 javascripts...
Also it is very easy to initialize here is a code sample :
也很容易初始化这里是一个代码示例：
Add the css and js(available in the downloaded zip file) required at the top
在顶部添加所需的 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>
The table with the id 'theTable'
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>
Now Intialize datatables by the following:
现在通过以下方式初始化数据表：
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#theTable').dataTable();
} );
</script>
That will inialize datatable wit zero configs....
这将初始化数据表机智零配置....
To set position of the pagination use the sDomfeature
要设置分页位置，请使用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>'
Notice the letters lfr, t,ip they stand for :
注意它们代表的字母 lfr、t、ip：
'l' - Length changing 'f' - Filtering input 't' - The table! 'i' - Information 'p' - Pagination 'r' - pRocessing
'l' - 长度改变 'f' - 过滤输入 't' - 表格！'i' - 信息 'p' - 分页 'r' - pRocessing
Just swap the places of these letters and get them where you want r/l by p
只需交换这些字母的位置，然后将它们放在您想要的位置 r/l by p
回答by Piyush Mattoo
I would recommend using Datatables . Just follow the documentation. Let me know in case you face any problems. You just need to call the construction function to get started
我建议使用Datatables。只需按照文档操作即可。如果您遇到任何问题，请告诉我。您只需要调用构造函数即可开始
$(document).ready(function() {
$('#tableid').dataTable();
} );
You can download the source files from here
你可以从这里下载源文件
