一些数据这几天我一直在寻找一个好的和简单的方式来排序数据转化为一个表格，一个简单的点击表头，我发现这个有趣的框架：来自Stuart Langridge的sorttable.js. 。本教程讲述了如何使用它来实现这种ajax效果的数据表格：
第一步: 调用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>
下载本教程(含sorttable.js脚本)原文:
翻译：帕兰
没有评论:
发表评论