Добавление идентификатора в строку таблицы данных

Question

Я использую функцию для добавления новой строки в таблицу данных каждый раз, когда нажимается кнопка. Тем не менее, я хочу иметь возможность добавлять идентификатор строки для каждой новой добавленной строки, но по какой-то причине способ, которым я пытаюсь это сделать, не работает. Чтобы проверить, работает ли мой код, я добавил предупреждение, которое сообщает мне идентификатор строки при щелчке строки. Вы можете увидеть страницу здесь . Ниже мой код:

$('#addRow').on('click', function() {
$('.progress-button .progress-circle').svgDraw(0);
$('.progress-button').on('click', function() {

var $button = $(this);
$(this).addClass('loading');

var $progress = $(this).find('.progress-circle');
var progress = 0;
var intervalId = setInterval(function() {
    progress += Math.random() * 0.5;
    $progress.svgDraw(progress);

    if(progress >= 1) {
        clearInterval(intervalId);
        //console.log("cleared interval");
        $button.removeClass('loading');
        if($button.attr('data-result') == "true") {
            $button.addClass('success');
            setTimeout(function(){ closeNav(); }, 1000);
        }
        else {
            $button.addClass('error');
        }
    }
}, 500);

// Now that we finished, unbind
$(this).off('click');

var t = $('#mytable').DataTable();

var reference = document.getElementById('reference').value;
var pallets = document.getElementById('pallets').value;
var pieces = document.getElementById('pieces').value;
var location = document.getElementById('location').value;
var carrier = document.getElementById('carrier').value;
var id = document.getElementById('id').value;

setTimeout(function(){ t.row.add( [
        reference,
        pallets,
        pieces,
        location,
        carrier,
        '<center><a href="delete.php?id=' + id + '" onclick="myAlert(' + id + ')" ><i class="fa fa-truck clear" aria-hidden="true"></i></a></center>',
        '<center><a><i class="fa fa-pencil-square-o edit" aria-hidden="true"></i></a></center>'
        ] ).node().id = id;
    t.draw( false );
      }, 1500);

  });
});

Answer 1

Вы можете добавить идентификатор к узлу строки, который возвращается из table.row.add. Вы можете посмотреть row.add API для получения дополнительной информации, но вы можете делать то, что вы хотите, в следующем примере

var table = $('#example').DataTable();

var rowNode = table
    .row.add( [ 'Fiona White', 'Engineer' ] )
    .draw()
    .node();
 
$(rowNode).attr( 'id', 'myCustomID' );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
</table>