DataTables-从单元格数据中的跨度获取ID

Question

I have a DataTable and in this table is a cell, which contains multiple span -Elements, like this one:

<span class="btn btn-xs btn-info" data-room="1910" data-id="1" disabled>
  <strong>unimportant description</strong>
</span>

I've just put the content of the cell into a variable:

var extras = roomstable.cell(closestRow,3).data();

How can I filter out the IDs in the data-id -Tags to put it into an Array?

Answer 1

I can provide the solution with jquery.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

As argument you should define your cell, in your case it would be extras . Try to give yours roomstable.cell(closestRow,3) . In my case was $('#dt').find('tr').eq(1).find('td').eq(0)

 $(function(){ var table = $('#dt').DataTable(); arr_ids($('#dt').find('tr').eq(1).find('td').eq(0)); }) function arr_ids(celll) { var ar = []; celll.find('span').each(function(){ if ($(this).data('id')) { ar.push($(this).data('id')); } }); alert(ar); } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> <table id="dt"> <thead> <th>aaaaaaaaaaaaaaaaaaaaaa&nbsp;&nbsp;</th> <th>bbbbbbbbbbbbbbbbbbbbbbb&nbsp;&nbsp;</th> <th>ccccccccccccccccccccc&nbsp;&nbsp;</th> </thead> <tbody> <tr> <td> <span class="btn btn-xs btn-info" data-room="1910" data-id="1" disabled> <strong>unimportant description</strong> </span> <span class="btn btn-xs btn-info" data-room="1945" data-id="13" disabled> <strong>unimportant description</strong> </span> </td> <td> </td> <td> </td> </tr> </tbody> <tfoot> <th>aaaaaaaaaaaaaaaaaaaaaa&nbsp;&nbsp;</th> <th>bbbbbbbbbbbbbbbbbbbbbbb&nbsp;&nbsp;</th> <th>ccccccccccccccccccccc</th> </tfoot> </table> 

Answer 2

If the idea is to extract multiple buttons id's within a cell into an array, you would rather need to employ cell().node() method instead of cell().data() .

That would let you grab all the buttons, turn that set toArray() and extract data-id attribute values:

var extras = $(roomstable.cell(closestRow,3).node())
   .find('span.btn')
   .toArray()
   .map(span => $(span).attr('data-id'));