Таблица заказов html asc

Question

У меня есть функция, которая добавляет строки в мою таблицу, но проблема в том, что она не всегда находится в порядке возрастания, для сортировки элементов используется столбец чисел.

Мне нужно переупорядочить мой стол HTML в соответствии с колонкой N °.

Это мой стол:

+------+---------------+---------------+-----------+ 
| N° | COLUMN1  | COLUMN2 | COLUMN3 | 
+------+---------------+---------------+-----------+ 
| 2 | AAAAAAAAAAAA | XXXXXXXXXXXX | 00000000 | 
| 1 | BBBBBBBBBBBB | YYYYYYYYYYYY | 00000000 | 
| 3 | CCCCCCCCCCCC | ZZZZZZZZZZZZ | 00000000 | 
+------+---------------+---------------+-----------+ 

В результате ожидается, является:

+------+---------------+---------------+-----------+ 
| N° | COLUMN1  | COLUMN2 | COLUMN3 | 
+------+---------------+---------------+-----------+ 
| 1 | BBBBBBBBBBBB | YYYYYYYYYYYY | 00000000 | 
| 2 | AAAAAAAAAAAA | XXXXXXXXXXXX | 00000000 | 
| 3 | CCCCCCCCCCCC | ZZZZZZZZZZZZ | 00000000 | 
+------+---------------+---------------+-----------+ 

Каждый столбец имеет порядок атрибутов, выглядит следующим образом:

<tr data-order='2'>......</tr> 
<tr data-order='1'>......</tr> 
<tr data-order='3'>......</tr> 

Я пытаюсь подключиться к подключению DataTable (он работает), но я бы хотел отсортировать таблицу без дополнительного плагина.

Благодарим за помощь! :)

EDIT: Решение проблемы ...

, как я упомянул, у меня есть функция, которая добавляет новый тр.

function addnewTR(newOrder, new_tr){ 
    //Code 
} 

Первого, найти, если порядок существует в таблице, если существует множество В к переменному.

$('#myTable tbody tr').each(function (i) { 

    var _tr; 
    var order = $(this).data("order"); 

    if (order_actual == newOrder) { 
     _tr = this; 
    }; 

}); 

Второй, Проверьте положение _tr вставить свой новый элемент, используя insertAfter (если есть порядок в таблице) или append (если заказ новый).

if (_tr !== undefined) { 
    $(new_tr).insertAfter(_tr); 
} else { 
    $("#myTable tbody").append(new_tr); 
} 

Answer 1

Ниже чистый Javascript решение. Он сохраняет первоначальный порядок, поэтому вы можете сказать, что это стабильная сортировка. Примечание:

1. Я предположил, что вы данных порядка содержит только целые числа
2. могут иметь одинаковые значения для данных порядка
3. Сортировка в порядке ASC

Объяснение:

1. Вам необходимо получить <tr> список из таблицы
2. Хранить его на объект в следующем виде: { «Данные порядка»: [HTMLElement: tr_1, HTMLElement: tr_2]
3. Тогда пустые все строки на столе
4. Получить набор ключей от объекта, созданного на шаге 2
5. разбирайтесь
6. печати это (обратите внимание на каждый элемент на ваш объект может иметь более одного объекта, если разрешить повторяющиеся значения данных порядка)

var table = document.getElementsByTagName("table")[0]; 
 
var new_tbody = document.createElement('tbody'); 
 
var tr_list = document.getElementsByTagName("table")[0].rows; 
 
var tr_list_obj = {}; 
 
for(var tr_index in tr_list){ 
 
\t var tr = tr_list[tr_index]; 
 
\t if(tr instanceof HTMLElement){ 
 
    \t if(tr_list_obj[tr.getAttribute("data-order")] instanceof Array){ 
 
    \t tr_list_obj[tr.getAttribute("data-order")].push(tr); 
 
    }else{ 
 
    \t tr_list_obj[tr.getAttribute("data-order")] = new Array(); 
 
    \t tr_list_obj[tr.getAttribute("data-order")].push(tr); 
 
    } 
 
    } 
 
} 
 

 

 
tr_list[0].parentNode.innerHTML = ''; 
 

 

 
tr_list_sort_array = Object.keys(tr_list_obj); 
 
tr_list_sort_array.sort(); 
 

 
for(var tr_index in tr_list_sort_array){ 
 
\t for(var tr_index_2 in tr_list_obj[tr_list_sort_array[tr_index]]){ 
 
    \t \t table.appendChild(tr_list_obj[tr_list_sort_array[tr_index]][tr_index_2]); 
 
    } 
 
}

<table> 
 
<tr data-order='2'><td>First 2</td></tr> 
 
<tr data-order='1'><td>First 1</td></tr> 
 
<tr data-order='3'><td>First 3</td></tr> 
 
<tr data-order='5'><td>First 5</td></tr> 
 
<tr data-order='4'><td>First 4</td></tr> 
 
<tr data-order='9'><td>First 9</td></tr> 
 
<tr data-order='4'><td>Second 4</td></tr> 
 
<tr data-order='1'><td>Second 1</td></tr> 
 
<tr data-order='3'><td>Second 3</td></tr> 
 
</table>

Answer 2

Все, что вам нужно сделать, это:

ходьба throu всех rows в таблице, если индекс, если строка dosn матч права data-ordermove it это правильное место.

Answer 3

попробовать это:

$('tr').sort(function (a, b) { 
    var contentA = parseInt($(a).data('order')); 
    var contentB = parseInt($(b).data('order')); 
    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0; 
}) 

запустить его после добавления новой строки

и проверить Array.prototype.sort

Answer 4

Вы не сможете сортировать место. Поэтому нужно отсоединить и добавить.

1) получить родитель и список TRs

2) сортировать TRs

3) Отделить и добавляемых

ТОЙ

var $table = $('table'), 
$tr = $table.children('tr'); 

$tr.sort(function(a,b){ 
    var an = Number(a.data('order')), 
     bn = Number(b.data('order')); 

    if(an > bn) { 
     return 1; 
    } 
    if(an < bn) { 
     return -1; 
    } 
    return 0; 
}); 

$tr.detach().appendTo($table);