Entonces, por ejemplo, tengo una tabla que se muestra así.
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } <h2>HTML Table</h2> <table> <tr> <th>ID</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>6</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>5</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>4</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>3</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>1</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>2</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table>Por lo tanto, estos datos no se guardan en mi base de datos, pero he guardado su recuento real, por lo que cada vez que voy a editar, solo aparecerán en mi vista, y mi objetivo es organizarlos primero en función de su recuento.
var count = [1,2,3,4,5,6];así que con esta matriz, suponga que esta es su disposición. Mi pregunta es ¿cómo es posible organizarlos en función de mi variable de conteo usando la columna ID?
Si es posible:
const sort = (rows, sort) => sort.map(e => rows.find(({ id }) => id == e)) const getRowId = (row) => +jQuery(jQuery(row).find('td')[0]).text() // 0 is the first column const getSortObj = (row) => ({ id: getRowId(row), row }) const setDirectionText = (directionSpan) => (direction) => directionSpan.text(direction) jQuery(document).ready(function($) { let sortByArr = [1, 2, 3, 4, 5, 6] let direction = "ASC" const directionSpan = setDirectionText($("#direction")) directionSpan(direction) $('#btn-sort').on('click', function() { const $rows = $('#table tbody tr') const sortedRows = sort($.map($rows, getSortObj), sortByArr).map(({ row }) => row) $('#table tbody').html(sortedRows) sortByArr = sortByArr.reverse() direction = direction === "ASC" ? "DESC" : "ASC" directionSpan(direction) }) }) table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>HTML Table</h2> <button id="btn-sort">SORT TABLE <span id="direction"></span></button> <br /> <br /> <table id="table"> <thead> <tr> <th>ID</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>6</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>5</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>4</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>3</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>1</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>2</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </tbody> </table>Este fragmento hace un poco más de lo que pidió: puede ordenar en orden ascendente y descendente, alternando después de cada ordenación.