Order registration by name in alphabetical order

Question

I have some entries that you have the option to filter alphabetically by name. I enter these entries through the append like this:

$(".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>`
);  

Visually it looks like this:

I’d like to sort them alphabetically by name.

In my bank, I have these fields:

To get the name of my existing criminal records do:

var db = getDataBase();
db.transaction(function(tx){
   tx.executeSql('SELECT nome FROM cartoes', [], function(tx, results){
        for(i=0; i<results.rows.lenght; i++){
              var nome = results.rows.item(i).nome;
              console.log(nome);
       }
   });

});

How do I pick and update them in my list that was inserted with append when the user wants to sort by name?

Answer 1

You’re using a for and simply adding the names, if you sort your search probably your problem is solved.

Add a ORDER BY at the end of his SELECT

SELECT nome FROM cartoes ORDER BY nome

Answer 2

Hello, It seems you forgot to add some of your tables anyway, you can remove the data already added in the listing with:

$(".listagem").html('')

And then add again with the same append, for that could create a function that adds the values:

function addRow(row){
     $(".listagem").append(SEU HTML);
}

And call by clicking on the sort call the function:

function ordenar(campo, direction = 'asc'){
    var db = getDataBase();
    db.transaction(function(tx){
       tx.executeSql('SELECT nome FROM cartoes order by '+campo + ' '+ direction, [], function(tx, results){
            for(i=0; i<results.rows.lenght; i++){
                  //chama função para adicionar os dados
                  addRow(results.rows.item(i));
           }
       });

    });
}

The order by will cause the records to be ordered by the field and direction reported in the function (asc or desc)