DataTables - получить идентификатор из диапазона в Cell-Data

Question

У меня есть DataTable , и в этой таблице есть ячейка, которая содержит несколько span -элементов, как этот:

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

Я только что поместил содержимоеячейки в переменную:

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

Как отфильтровать идентификаторы в тегах data-id, чтобы поместить их в массив?

Answer 1

Я могу предоставить решение с помощью jquery.

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

В качестве аргумента вы должны определить свою ячейку, в вашем случае это будет extras. Попробуйте дать свои roomstable.cell(closestRow,3). В моем случае было $('#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

Если идея состоит в том, чтобы извлечь несколько идентификаторов кнопок в ячейке в массив, вам лучше использовать метод cell().node() вместо cell().data().

Это позволит вам захватить все кнопки, повернуть набор toArray() и извлечь значения атрибута data-id:

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