Table sorting in twitter bootstrap 3.1.1

Question

 <div class="table-responsive">
    <table class="table table-hover gradienttable">
        <thead>
            <tr>
                <th>Id</th>
                <th>State</th>
                <th>Sub State</th>
                <th>Title</th>
                <th>Severity</th>                   
                <th>InstanceNum</th>
                <th>CreatedBy</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var incident in Model.GetActiveIncidents())
            {
                <tr>
                    <td><a target="_blank" [email protected]>@incident.Id</a></td>
                    <td>@incident.State</td>
                    <td>@incident.SubState</td>
                    <td>@incident.Title</td>
                    <td>@incident.Severity</td>
                    <td>@incident.InstanceNum</td>
                    <td>@incident.CreatedBy</td>
                </tr>
            }
        </tbody>
    </table>   
</div> 

The code above is the way i populate data into my table

How can i make this table sort enabled for twitter bootstrap 3.1.1 version. I referred one of the question on stackoverflow and tried using it by it didnt work How can I make table being capable of sorting with twitter bootstrap

Any suggestions please?