客户端分页

我想做客户端分页，并使用建议here建议jquery。使用该脚本的问题很少。一个分页图标总是出现在底部，无论我们在分页器div.Plus上设置了什么位置，我的表格都有一些数据大小不一致的情况，因此页面可能会有不同的大小。正因为如此表规模大幅变化，但寻呼机保持固定casuing overlap.I试图div来serperate但没有use.Here的是我的寻呼机代码客户端分页

<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是表格。

我想将寻呼机代码放在顶端，以便我的表的大小不会影响分页图标。

来源

2011-03-30 Harish

下载源文件，您可以使用[数据表]（http://www.datatables.net/），而不是.. 。它具有高度的可定制性，并且可以像搜索，分页和排序一样提供设施，分页块的位置可以设置在任何你想要的地方。但你需要Jquery – 2011-03-30 05:43:08

我对jquery很新。没有问题有JQuery，你能否提供一个示例代码来实现仅使用DataTables的id表的代码分页 – Harish 2011-03-30 05:46:18

在有很多的例子可以用DataTables可以download例子与CSS和它需要的Java脚本一起...

此外，它很容易在这里初始化是一个代码示例：

添加顶部

<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'

的表所需的CSS和JS（在下载的zip文件）个

<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>

现在Intialize数据表通过以下：

<script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      $('#theTable').dataTable(); 
     }); 
</script>

这将inialize数据表机智零个CONFIGS ....

要设置分页使用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” - 处理

只要将这些信件的地方，让他们在那里，你想用p

来源

2011-03-30 06:07:29

辉煌的你让我的一天感谢。有疑问在哪里添加这个sDom功能？是否欢迎使用js代码或Html – Harish 2011-03-30 06:25:36

。 – 2011-03-30 06:30:04

R/L我会建议使用Datatables。只需按照文档。如果您遇到任何问题，请告知我。你只需要调用建设中的作用上手

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

您可以从here

来源

2011-03-30 06:12:07

回答

相关问题