jeudi 23 juin 2016

Order table html asc


I have a function that adds rows to my table, but the problem is that it's not always in asc order, have a number column to sort the items.

I need reorder my table HTML acording to the column N°.

It's my table:

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

The result expected is:

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

Each column has an attribute order, looks like this:

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

I try with the pluging DataTable (It's working), but I would like to sort my table without additional plugin.

Thanks for help in advance! :)

EDIT: Solution to the problem...

as I had mentioned I have a function that adds a new tr.

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

First, find if the order exist in the table, if exist set the tr to the variable.

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

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

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

});

Second, Check the position of _tr to insert my new element using insertAfter (if exist the order in the table) or append (if the order is new).

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

Aucun commentaire:

Enregistrer un commentaire