Question

我想做客户端分页并按建议使用Jquery建议here。使用该脚本几乎没有问题。无论我们在寻呼机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>

这是我的Jquery脚本

<script type="text/javascript">
    $(function() {
        $(theTable)
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});
    });
    </script>

我的表格ID是表格。

我想将寻呼机代码置于顶部，以便我的表格大小不会影响分页图标。

Answer 1

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' - 桌子！ '我' - 信息 'p' - 分页 'r' - pRocessing

只需交换这些字母的位置，然后通过p

将它们移到你想要的地方

Answer 2

我建议使用Datatables 。只需按照文档。如果您遇到任何问题，请告诉我。您只需要调用构造函数即可开始

$(document).ready(function() {
$('#tableid').dataTable();
} );

您可以从here

下载源文件

客户端分页

2 个答案: