1

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Neha
  • 11
  • 1
  • Possbile duplicate of https://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns – Nurjan Jun 05 '17 at 09:43

1 Answers1

0
<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

Himesh Suthar
  • 562
  • 4
  • 14
  • You are using only numbers, change the id to id-1, id-2 and add a id-10, it will place id-10 before id-2. – Neha Jun 05 '17 at 10:04
  • No, you are failing to see the point here. add an id-10, you;ll see it's placed before id-2. You haven't made any change in your previous and updated code. Have you? – Neha Jun 05 '17 at 10:45
  • @Neha yes i did. but i not i got you. let me check it again. will get back – Himesh Suthar Jun 05 '17 at 10:47
  • what i am trying to say is if you include id-10 and id-11 since it sorts this alphabetically, it will place in this order: id-1, id-10, id-11, id-2. What I want is: id-1,id-2,id-10,id-11. – Neha Jun 05 '17 at 10:51
  • i got u .. check my updated answer and fiddle. @Neha. actually at first, i misunderstand your question. – Himesh Suthar Jun 05 '17 at 10:59
  • but my issue is i am not hard coding data like you have, I don't have table data fixed, my table data is being set through code. So i cannot use data-bugid="xyz" in the td fields. – Neha Jun 05 '17 at 11:16
  • u can set data-bugid or data-id what ever u what as index value of your data. may be u will populate array or json data. make index as data-bugid @Neha – Himesh Suthar Jun 05 '17 at 11:18
  • actually it is an mvc model, and i am using something like this: var table = document.getElementById('myTable').getElementsByTagName('tbody')[0]; var row = table.insertRow(0); var cell1 = row.insertCell(0); – Neha Jun 05 '17 at 11:42
  • @Humesh could you please elaborate your last comment ? – Neha Jun 08 '17 at 10:02