javascript 如何根据列索引使用javascript对html表进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11572431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to sort a html table using javascript based on column index
提问by NewBie
I'm using a table with the structure
我正在使用具有结构的表
<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"> </td>
<td align="center"> </td>
<td align="center"> </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"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">Country4</td>
</tr>
</table>
I need to sort the table based on the 'th' with header 'Client Name'. Gone through so many links and all are sorting based on header clicks and i dont know javascript much. Kindly help
我需要根据标题为“客户名称”的“th”对表格进行排序。浏览了这么多链接，所有链接都基于标题点击进行排序，我不太了解 javascript。请帮忙
回答by Adam B
If you don't know much javascript, then I recommend tablesorter:
如果您不太了解 javascript，那么我推荐 tablesorter：
Make sure you have jQuery included, then include the tablesorter JS and CSS files. you'll also need to wrap the head in tags, and the body in tags. The docs on the website have all the info that you need
确保包含 jQuery，然后包含 tablesorter JS 和 CSS 文件。您还需要将头部包裹在标签中，将身体包裹在标签中。网站上的文档包含您需要的所有信息
回答by retrohacker
I'm not sure what your exact situation is because your post was lacking detail but I think you might find a different approach easier to manage.
我不确定你的确切情况是什么，因为你的帖子缺乏细节，但我认为你可能会发现一种更容易管理的不同方法。
If you are able to, you should create a 2 dimensional array in JavaScript that has [6][n]members where n is the number of entries you plan to store in the table. After creating the array, hard code all of the data into the arrays. Once you have the data in the array, what you will want to do is sort the corresponding row and then populate an html table using a for-loop.
如果可以，您应该在 JavaScript 中创建一个二维数组，其中包含[6][n]成员，其中 n 是您计划在表中存储的条目数。创建数组后，将所有数据硬编码到数组中。一旦您拥有数组中的数据，您将要做的是对相应的行进行排序，然后使用 for 循环填充 html 表。
This approach will cause a lot less headache because you wont have to worry about loading data in from the HTML page and then replacing the entire table with a newly generated one like your current approach will require.
这种方法会减少很多麻烦，因为您不必担心从 HTML 页面加载数据，然后像当前方法需要的那样用新生成的表格替换整个表格。
If you have any questions or need further clarification comment below.
如果您有任何问题或需要进一步说明，请在下面发表评论。
Cheers and Happy Coding!
干杯和快乐的编码！
回答by John - Not A Number
Sounds like you just want to table sorted based on a particular column, without the user having to click to initiate it.
听起来您只想根据特定列对表格进行排序，而无需用户单击即可启动它。
You can do this using DataTables. When you initialize the datatable, you can specify which column it should be sorted on:
您可以使用 DataTables 执行此操作。当你初始化数据表时，你可以指定它应该在哪一列上排序：
$(document).ready(function() {
oTable = $('#ctl00_Content_GrdCustomer').dataTable( {
"aaSorting": [[ 1, "asc" ]]
} );
} );
});
The API also includes the function fnSort, which you can use to re-sort it after initialization, you just need to do a call such as this to re-sort it at any time:
API中还包含了fnSort函数，初始化后可以使用它重新排序，你只需要像这样调用就可以随时重新排序：
// Sort immediately with columns 0 and 1
oTable.fnSort( [ [0,'asc'], [1,'asc'] ] );
