0
176
Vistasla columna de clasificación no funciona en bootstrap 5
Creé una tabla con bootstrap 5 pero una vez que intenté ordenar la primera columna no obtuve ningún cambio. así es como se ve la tabla:
La tabla se define así:
<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>Lo que necesito es ordenar toda la tabla con respecto a la primera columna "Fecha y hora del evento".
muchas gracias por cualquier sugerencia
2 Respuestas
Responde la pregunta0
No puede ordenar una tabla con Bootstrap 5-Tables . ¿Tal vez usas algo más que este Bootstrap? De lo contrario, puede ver Datatables para ordenar las tablas.
0
Al final encontré una manera de ordenar los datos en la tabla como quería.
Básicamente, tuve que reunir cada fila de la columna en una matriz de diccionario para que:
array=[{id:xx,tipo:xx,estado:xx,nivel:xx...} {id:xx,estado:xx,...}]
Luego ordené la matriz usando la identificación, por ejemplo, con:
array.sort((a, b) => { if (a.id < b.id) { return -1; } if (a.id > b.id) { return 1; } return 0; })De esta manera tuve la tabla correctamente formateada ordenada por Id en este ejemplo