table sort when table header is clicked

Question

i am using asp table and repeater.i need to sort the data when the table header is clicked. how can i sort the table data when i click the table header? can anyone help me please my html code is as follows

<div class="blue"> <table id="mytable" data-sortable class="table table-hover table-striped"> <thead> <tr> <th id="sl">Code</th> <th id="nm">Name</th> <th data-sortable="false">Edit</th> <th data-sortable="false">Delete</th> </tr> </thead> <tbody> <asp:Repeater runat="server" id="rptArea" > <ItemTemplate> <tr> <td> <strong> <%# Eval("strAreaCode")%></strong></td> <td> <%# Eval("strAreaName")%></td> <td> <div class="btn-group btn-group-xs"><a href="AreaMaster.aspx?strAreaCode=<%# Eval("strAreaCode")%>&Action=Edit" data-toggle="tooltip" title="" data-original-title="Edit"> <i class="fa fa-edit" style="font-size:24px;color:red;"></i> </a> </div> </td> <td> <div class="btn-group btn-group-xs"> <a href="AreaMaster.aspx?strAreaCode=<%# Eval("strAreaCode")%>&Action=Delete" onclick="return confirm('Are you sure?')" data-toggle="tooltip" title="Delete"> <i class="fa fa-trash" style="font-size:24px;color:green;"> </i> </a> </div> </td> </tr> </ItemTemplate> </asp:Repeater> </tbody> </table>

Answer 1

You can do it by two ways.

Client Side sorting

1. use a jQuery plugin like sortable or this one, so post having many

Server Side sorting

1. Make your table header as linked button/ button

<asp:LinkButton ID="sl" runat="server" CommandName="Code" CssClass="hrefclass">Code</asp:LinkButton>

2. Handle the click event on server

3. Sort the datasource e.g. data table and rebind it to repeater control

Refer this for example

Answer 2

Here is an example using bootstrap, this might help you

<table data-toggle="table"
>
<thead>
    <tr>
        <th data-field="fruit" data-sortable="true">Item</th>
        <th data-field="date"  data-sortable="true" data-sort-name="_date_data" data-sorter="monthSorter">Date</th>
        <th data-field="type"  data-sortable="true">Type</th>
    </tr>
</thead>
<tbody>
    <tr><td>Pear  </td><td data-month="1">January</td> <td>Fruit</td></tr>
    <tr><td>Carrot</td><td data-month="3">March</td>   <td>Vegetable</td></tr>
    <tr><td>Apple </td><td data-month="2">February</td><td>Fruit</td></tr>
</tbody>

<script>
function monthSorter(a, b) {
    if (a.month < b.month) return -1;
    if (a.month > b.month) return 1;
    return 0;
}
</script>