How to sort a html table using javascript based on column index

Question

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">&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>

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

Answer 1

If you don't know much javascript, then I recommend tablesorter:

tablesorter.com

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

Answer 2

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.

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.

If you have any questions or need further clarification comment below.

Cheers and Happy Coding!

Answer 3

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:

$(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:

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