How can I sort a column that contains number and image using datatable

Question

How can I sort the second column that contain image and number.

<table id='tb' class="table table-bordered table-striped table-hover">
    <tr>
        <td>status</td>
        <td><img src='edit.png'>1</td>
    </tr>
    <tr>
        <td>status</td>
        <td><img src='edit.png'>2</td>
    </tr>
    <tr>
        <td>status</td>
        <td><img src='edit.png'>3</td>
    </tr>
</table>

I tried like this,because of that image it sorting as 1,10,11,12..If I remove that image tag it sorting properly.So kindly give some solution.

$("#tb").dataTable({
    "order": [
        [1, "asc"]
    ]
});

Answer 1

Because of the image tag, it is sorting as a string. It will start sorting with the first text it sees though, so the way i get around this is by appending a hidden span with the numerical value. You just have to remember to make all the values of same length since they will still be sorted as strings. You can do this by appending 0's.

An example [assuming i know that my number will never be over 100]:

<td><span style="display:none">024</span><img src='edit.png'>24</td>
...
<td><span style="display:none">001</span><img src='edit.png'>1</td>
...
<td><span style="display:none">033</span><img src='edit.png'>33</td>
...
<td><span style="display:none">051</span><img src='edit.png'>51</td>

An ascending sort, even as a string, will result in 1, 24, 33, 51