Quando o Datatables é renderizado, as colunas invisíveis são excluídas totalmente do DOM, portanto sendo inacessíveis via JavaScript comum. É preciso usar a API do componente, ou seja, o método row().data() irá retornar os dados da linha via JSON.
Para pegar a linha do elemento clicado você usa:
var linha = $(this).closest("tr");
O .closest("tr")
irá buscar o primeiro elemento tr
pai do elemento clicado.
Como a coluna é nomeada com o termo Nomes
, basta pegar o valor de .data().Nomes
da row retornada na variável linha
:
var texto = $('#table_id').DataTable().row(linha).data().Nomes;
O seletor '#table_id'
é o id da tabela. Altere para o id da sua
tabela atual.
Veja um exemplo:
$(document).ready( function () {
$('#table_id').DataTable({
"columns": [
{ data: "Nomes", autoWidth: true, visible: false}, null, null
]
});
$(".btn").click(function(){
var linha = $(this).closest("tr");
var texto = $('#table_id').DataTable().row(linha).data().Nomes;
console.log(texto);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1 invisível</td>
<td>Row 1 Data 2</td>
<td><button class="btn">clique</button></td>
</tr>
<tr>
<td>Row 2 Data 1 invisível</td>
<td>Row 2 Data 2</td>
<td><button class="btn">clique</button></td>
</tr>
</tbody>
</table>