How to sort div elements?

Question

JavaScript

Hello.
There is an html page. It has a table. But the table is unusual, formed from div with table display
Something like this

<div id="table">
  <div class="table_header">
    <div class="th">Артикул</div>
    <div class="th">Название</div>
    <div class="th">цена</div>
  </div>
  <div class="tr">
    <div class="td column1">3333333</div>
    <div class="td column2">Бла бла бла</div>
    <div class="td column3">150</div>
  </div>
  <div class="tr">
    <div class="td column1">2222</div>
    <div class="td column2">Бла бла бла</div>
    <div class="td column3">250</div>
  </div>
  <div class="tr">
    <div class="td column1">151515</div>
    <div class="td column2">Бла бла бла</div>
    <div class="td column3">350</div>
  </div>
  
</div>

Briefly, why it was done this way, otherwise you will be called a pervert. There can be many rows in a table. 500. 700. 1500 and so on. If you use a regular table, then the browser either starts to slow down, or even crashes. As far as I know, this is due to increased memory consumption and processor load when displaying and calculating the table. This doesn't happen with divs.

Actually the task is to sort the table by article.

We see such a function that will return a sorted div.tr array to us. Rows containing the article passed to the function should be the very first.

function sortList(artikul){
    var rows=$.makeArray($('div.tr')); //тут у нас будут все поля таблицы
      var e= rows.sort(function(a, b){
      //если артикул в данном ряде есть
           if(artikul==$(a).find('div.col1umn1').text()){
               return 1; 
           }else{
               return -1;
           }
       });
     //возвращаем сортированный массив
    return e;
}

But for some reason it doesn't work. What am I doing wrong? Perhaps there is a more elegant way to solve this problem?

Answer 1

Perhaps there is a more elegant way to solve this problem?

Of course you can. It is enough to understand that you do not need to sort the rows of the table, but the data . And then render the data.
The data should control the DOM, not the other way around. This approach will not only significantly speed up the application (we get rid of unnecessary operations with DOM elements), but also make the code more understandable and extensible.
To do this, you can use any mvvm framework or write everything yourself, if there is only one such table, the functionality is limited only by sorting and for some reason you don’t want to use ready-made tools.
See, for example, how simple, and most importantly, understandable, your task is solvedusing Backbone. The application is divided into layers and divided into parts, each layer and each part does its own thing. Of course, this is a quick'n'dirty demo, there may be bugs, so don't use this code in production :)

Answer 2

If you use a regular table, then the browser either starts to slow down, or even crashes. As far as I know, this is due to increased memory consumption and processor load when displaying and calculating the table. This doesn't happen with divs.

Offtopic of course, but have you tried telling the table table-layout: fixed; in this case, the speed of calculations increases many times over.