CODEWITHSUNDEEP
javascriptjquerydatatables
Carlos
Carlos

Reputation: 425

Adding an id to a datatables row

I am using a function to add a new row to my datatable every time a button is clicked. However, I wanna be able to add a row id to each new row added, but for some reason, the way I am trying to do it is not working. In order to test if my code is working, I have added an alert that tells me the row id when the row is clicked. You can see the page here. Below is my code:

$('#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);

  });
});

Upvotes: 0

Views: 692

Answers (1)

Andrew L
Andrew L

Reputation: 5486

You can add an ID to the row node that is returned from table.row.add. You can look at the row.add API for more information, but you can do what you want with the following example

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>

Upvotes: 1

Related Questions