原文:http://www.kryogenix.org/code/browser/sorttable/
中文原文:创建一个Ajax效果的表格排序
翻译：帕兰
一些数据这几天我一直在寻找一个好的和简单的方式来排序数据转化为一个表格，一个简单的点击表头，我发现这个有趣的框架：来自Stuart Langridge的sorttable.js. 。本教程讲述了如何使用它来实现这种Ajax效果的数据表格：
Hobo ps:补充一句,这种方法同样适用于GridView,这两天我就是在做.net的数据页面的时候找到了这个插件,的确很方便,超级简单,但是在我使用的过程中这个效果和GridView表头固定表体滚动的那部分冲突了,在设置了表头固定后再滚动一小段并排序会导致表头消失..这个问题还在解决中..
第一步: 调用sorttable.js
创建一个新的页面并在 <head>标签里面调用Sorttable.js:
<script src=“sorttable.js” type=“text/javascript”></script>
第二步: HTML代码和表格排序的设计
创建一个表格并且给表格指定一定Class属性“sortable”:
<table class=“sortable“> … </table>
如果在同一页面有多个表格，你可以把这个Class属性添加到所有你想进行排序效果的表格里面。 下面是一个普通表格的演示，包含表头，单元格等基本元素:
<table class=“sortable”>
<!– Table Header –>
<thead>
<tr>
<th>Company</th>
<th>Ticker</th>
</tr>
</thead>
<!– Tabel body–>
<tbody>
<tr>
<td>Apple Inc</td>
<td>AAPL</td>
</tr>
<tr>
<td>GoogleInc</td>
<td>GOOG</td>
</tr>
</tbody>
<!– Tabel footer–>
<tfoot>
<tr>
<td>Total</td>
<td> 00.00</td>
</tr>
</tfoot>
</table>
在上面这个代码示像中，当你点击”Company”或是”Ticker”时，下面的<tbody>标签 将进行排序。
第三步: 使用PHP填充表格数据
你可以填充用服务器端语言如PHP数据填充到一个表格中，或是ASP也可以。下面是一个PHP的简单示例代码 :
<?php
// Include connection to your database
include(‘dbconnection.php’);
$getCompany_sql = ‘SELECT * FROM COMPANY‘;
$getCompany= mysql_query($getCompany_sql);?>
<table class=“sortable”>
<!– Table Header –>
<thead>
<tr>
<th>Company</th>
<th>Ticker</th>
</tr>
</thead>
<!– Tabel body–>
<tbody>
<?php while ($row = mysql_fetch_array($getCompany)) {?>
<tr>
<th><?php echo $row.['companyName'] ?></th>
<th><?php echo $row.['companyTicker'] ?></th>
</tr>
<?php } ?>
</tbody>
<!– Tabel footer–>
<tfoot>
<tr>
<td> … </td>
<td>…. </td>
</tr>
</tfoot>
</table>
0 留言: 发表留言