排序列在引导程序 5 中不起作用

Question

我用 bootstrap 5 创建了一个表，但是一旦我尝试对第一列进行排序，我没有得到任何更改。 这是表格的样子：

该表的定义如下：

<table class="table" id="reporttable">
    <thead>
      <tr>
      <th data-sortable="true">Event date & time</th>
      <th data-sortable="true">Event level</th>
      <th data-sortable="true">Event potential damage</th>
      <th data-sortable="true">Report no</th>
      <th data-sortable="true">Report type</th>
      <th data-sortable="true">Report status</th>
    </tr>
    </thead>
    <tbody>

      <td><div v-for="(datetime,index) in reportCreatedAt" :key="index" :style="colourChange(index)">
        {{datetime}}</div>
      </td>

      <td><div v-for="(level,index) in reportStateLevel " :key="index" :style="colourChange(index)" >
        {{level}}</div>
      </td>

      <td><div v-for="(plevel,index) in reportSeverity" :key="index" :style="colourChange(index)">
        {{plevel}}</div>
      </td>

      <td><div v-for="(link,index) in reportId" :key="index" :style="colourChange(index)"  >
        <router-link :to="{name: 'HTML Report', query:{id: link,cont:index+1}}" > 
          Report No {{index+1}} 
        </router-link></div>
      </td>

      <td><div v-for="(type,index) in reportType" :key="index" :style="colourChange(index)">
      {{type}}</div>
      </td>

      <td><div v-for="(status,index) in reportStatus" :key="index" :style="colourChange(index)">
        {{status}}</div>
      </td>

  </tbody>

</table>

我需要的是对第一列“事件日期和时间”的所有表格进行排序。

非常感谢您的任何建议

Answer 1

您不能使用Bootstrap 5-Tables对表进行排序。 也许您使用的不是这个 Bootstrap 吗？ 否则，您可以看到用于排序表的数据表。

Answer 2

最后，我找到了一种方法，可以根据需要对表中的数据进行排序。

基本上我必须在字典数组中收集该列的每一行，以便：

数组=[{id:xx,type:xx,status:xx,level:xx...} {id:xx,status:xx,...}]

然后我使用 id 对数组进行排序，例如：

array.sort((a, b) => {
  if (a.id < b.id) {
    return -1;
  }
  if (a.id > b.id) {
    return 1;
  }
  return 0;
})

通过这种方式，我在此示例中获得了按 Id 排序的正确格式的表格