客戶端分頁

我想做客戶端分頁，並使用建議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

回答

相關問題