如何使用基于列索引的javascript对html表进行排序

时间:2012-07-20 03:25:26

标签: javascript jquery asp.net html

我正在使用结构

的表格
<table cellspacing="0" cellpadding="3" rules="cols" border="1" id="ctl00_Content_GrdCustomer" style="color:Black;border-color:#999999;width:640px;border-collapse:collapse;">
    <tr style="color:White;background-color:Black;font-weight:bold;">
        <th scope="col">Something</th>
        <th scope="col">Client Name</th>
        <th scope="col">Address</th>
        <th scope="col">Place</th>
        <th scope="col">City</th>
        <th scope="col">Country</th>
    </tr>
    <tr class="home-history-grid-row customerData">
        <td align="center" style="width:50px;"><!--Checkbox Goes Here--></td>
        <td align="center">Raju Varghese</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">Country4</td>
    </tr>
    <tr class="home-history-grid-row customerData">
        <td align="center" style="width:50px;"><!--Checkbox Goes Here--></td>
        <td align="center">Joseph K. J</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">Country4</td>
    </tr>
</table>

我需要根据标题为'Client Name'的'th'对表格进行排序。通过这么多链接消失了所有链接基于标题点击排序,我不知道javascript多少。请帮助

3 个答案:

答案 0 :(得分:4)

如果您不太了解javascript,那么我推荐tablesorter:

tablesorter.com

确保包含jQuery,然后包含tablesorter JS和CSS文件。你还需要将头部包裹在标签中,将身体包裹在标签中。网站上的文档包含您需要的所有信息

答案 1 :(得分:1)

我不确定您的具体情况是什么,因为您的帖子缺乏详细信息,但我认为您可能会发现更容易管理的其他方法。

如果能够,您应该在JavaScript中创建一个具有[6][n]成员的二维数组,其中n是您计划在表中存储的条目数。创建数组后,将所有数据硬编码到数组中。在数组中有数据后,您要做的是对相应的行进行排序,然后使用for循环填充html表。

这种方法会减少头痛,因为您不必担心从HTML页面加载数据,然后用新生成的表替换整个表,就像当前的方法一样。

如果您有任何问题或需要进一步澄清以下评论。

干杯和快乐的编码!

答案 2 :(得分:0)

听起来您只想基于特定列对表进行排序,而无需用户单击以启动它。

您可以使用DataTables执行此操作。初始化数据表时,可以指定应对其进行排序的列:

$(document).ready(function() {
oTable = $('#ctl00_Content_GrdCustomer').dataTable( {
    "aaSorting": [[ 1, "asc" ]]
} );

});

API还包含函数fnSort,您可以在初始化后对其进行重新排序,您只需要执行此类调用即可随时对其进行重新排序:

 // Sort immediately with columns 0 and 1
 oTable.fnSort( [ [0,'asc'], [1,'asc'] ] );