1

Eu faço essa consulta no banco de dados pra listar todos os nomes dos cadastros...

    $('.ordenar').click(function(){
                    db.transaction(function(tx){
                        tx.executeSql('SELECT nome FROM cartoes', [], function(tx,results){
                            for(i=0; i<results.rows.length; i++){
                                console.log(results.rows.item(i).nome);
                                //Aqui ele me retorna todos os nomes dos cadastros existentes, exemplo:
//nomecadastro1
//nomecadastro2
//e assim sucessivamente..
                            }

                        });
                    });
                });

Esses cadastros são inseridos através de um append, dessa maneira:

$(".listagem").append(
                                                            `<div class="row" id="corpo-cartoes">
                                                                <div class="col s12 m7" style="width: 100%;">
                                                                    <div class="card">
                                                                        <a href="cartao.html#${lastId}">
                                                                            <div class="card-image">
                                                                                <div class="gradient-cartao-lista"></div>
                                                                                <img src="${capa}">
                                                                                <span class="card-title"><h1>${data.card.empresa}</h1><p>${data.card.code}</p></span>
                                                                            </div>
                                                                        </a>
                                                                        <div class="card-action icone-meu-cartao">
                                                                            <a href="#"><i class="material-icons">star</i></a>
                                                                            <a href="#"><i class="material-icons">crop_free</i></a>
                                                                            <a href="#"><i class="material-icons">visibility</i></a>
                                                                            <a href="cadastro-cartao.html#${lastId}"><i class="material-icons btn-editar">edit</i></a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>`
                                                        );  

Visualmente eles ficam assim:

inserir a descrição da imagem aqui

Eu criei primeiro o A, depois o B...

Logo, deve ficar invertido, o B deve ficar primeiro que o A.

Logo, como poderia ordená-los através do resultado?

Gostaria de ordená-los pelos adicionados recentemente, ou seja, do último registro até o primeiro. Como poderia fazer isso com JavaScript/Jquery?

3
  • Não serve ordenar direto na query?
    – Sorack
    Commented 14/12/2018 às 17:09
  • Pq não ordena a lista com CSS ?
    – hugocsl
    Commented 14/12/2018 às 17:10
  • Muda o seu comando sql pra ordenar por alguma coluna especifica e adiciona o desc na frente pra ficar inversa a ordenação Commented 14/12/2018 às 17:12

3 Respostas 3

2

Segue um modelo simples, eu tenho um container em flex, alinhado como coluna, quando clica no btn a ul que é o meu container faz um toggleClass e de column muda para column-reverse assim invertendo a ordem da lista.

$( "button" ).click(function() {
  $( 'ul' ).toggleClass( "inverte" );
});
ul {
    display: flex;
    flex-direction: column;
}
.inverte {
    flex-direction: column-reverse;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<button>inverter</button>
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

2
  • Sempre esqueço dessa feature, valeu jovem! Commented 14/12/2018 às 18:27
  • 1
    @fernandosavio esse esquema é top de mais rss! Mas a ordem no DOM não muda, só muda no print da página na tela
    – hugocsl
    Commented 14/12/2018 às 18:30
1

Se você quiser fazer pela queryvocê pode utilizar a cláusula ORDER BY:

ORDER BY coluna DESC

Ou pode ordenar no JavaScript pelo sort:

const rows = results.rows.sort((a,b) => return b.coluna - a.coluna);
2
  • E como eu reordenaria os cartões? Parte do html no caso...
    – dds
    Commented 14/12/2018 às 17:28
  • 1
    @dds Boa pergunta, você não citou nada disso na sua pergunta
    – Sorack
    Commented 14/12/2018 às 17:30
0

Uma sugestão de como você poderia ordenar seria utilizando array.sort. Para isso, você poderia mapear os resultados de tua consulta por uma array e realizar um sort com uma função de classificação personalizada.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .