好吧,我会给你两个答案,但我个人喜欢第一个。
第一个解决方案:
许多插件可用于执行此类任务。我个人最喜欢的是:jTable
“jTable 是一个 jQuery 插件,用于创建基于 AJAX 的 CRUD 表,无需编码 HTML 或 Javascript。”
第二种解决方案:
假设我们有一个这样的表结构:
<table cellspacing="1" class="tablesorter">
<thead>>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>jan 18, 2001 9:12 am</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>jan 18, 2007 9:12 am</td>
</tr>
</tbody>
</table><a href="#" id="ajax-append">append new table data</a><br><br>
现在我们可以这样做来获取我们想要的数据:
$(document).ready(function() {
$("table").tablesorter();
$("#ajax-append").click(function() {
$.get("assets/ajax-content.html", function(html) {
// append the "ajax'd" data to the table body
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
});
return false;
});
});
这是一个表格排序器应用程序,我已经应用了几次,但 jTable 插件仍然是完成这项工作的最佳解决方案。