HTML表格排序自定义列排序

时间:2017-06-05 09:26:25

标签: html sorting html-table

我有一个表格,我想对列“BugId”进行排序。

内置引导程序排序以特定方式排序,其中ID-1后面是ID-11,然后是ID-12,依此类推(以字母方式),而我希望ID-1后跟ID-2 ,然后ID-3 .... ID-11等等。(以数字方式)

这就是我的表格:

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

我能以这种方式只更改一列的排序吗?

1 个答案:

答案 0 :(得分: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>

排序功能

function bugidsorter(a, b) {
console.log(a);
    if (a.bugid < b.bugid) return -1;
    if (a.bugid > b.bugid) return 1;
    return 0;
}

fiddle