HTML Table Sort Customised Column Sort - html

Question

I have a table where I want to sort a column "BugId".
The inbuilt bootstrap sorting sorts in a particular fashion where ID-1 is followed by ID-11,then ID-12 and so on,(in an alphabetic fashion) whereas I want ID-1 to be followed by ID-2, then ID-3 ....ID-11 and so on.(in a numerical fashion)
This is how my table looks:
<table id="myTable" class="footable table table-striped toggle-arrow-tiny m-xxs" data-page-size="1000">
<thead>
<tr>
<th >Bug ID</th>
<th>Component</th>
<th data-sort-ignore="true">Report Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
Can I change the sorting for only one column in this fashion?

Answer 1

<table data-toggle="table" id="myTable" class="footable table table-striped toggle-arrow-tiny m-xxs" data-page-size="1000">
<thead>
<tr>
<th data-field="bugid" data-sortable="true" data-sort-name="_bugid_data" data-sorter="bugidsorter" >Bug ID</th>
<th data-field="component" data-sortable="true" >Component</th>
<th data-sort-ignore="true">Report Date</th>
</tr>
</thead>
<tbody><tr>
<td data-bugid="1">id-1</td>
<td >x</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="2" >id-2</td>
<td >a</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="3">id-3</td>
<td >b</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="4">id-4</td>
<td >c</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="5">id-5</td>
<td >d</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="6">id-6</td>
<td >e</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="10">id-10</td>
<td >e</td>
<td>11/12/2015</td>
</tr>
</tbody>
</table>
sorting function
function bugidsorter(a, b) {
console.log(a);
if (a.bugid < b.bugid) return -1;
if (a.bugid > b.bugid) return 1;
return 0;
}
fiddle