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

时间:2019-06-17 18:48:15

标签: javascript datatables

我有一个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-Tags中的ID并将其放入数组中?

2 个答案:

答案 0 :(得分:2)

我可以通过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>

答案 1 :(得分:1)

如果想法是将一个单元格中的多个按钮id提取到数组中,则您需要使用cell().node()方法而不是cell().data()

这将使您能够抓住所有按钮,转动设置的toArray()并提取data-id属性值:

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