3

Como faço para pegar o valor de uma coluna que esta com o visible: false?

 "columns": [
                    { data: "Nomes", autoWidth: true, visible: false},   
            ]

Exemplo da coluna Nomes, atualmente estou fazendo assim.

$(this).parent().parent().find('td').eq(0).text()

Só que se eu fazer desse jeito ele não retorna se a coluna estiver com visible: false

1 Resposta 1

2

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .