1

Olá!

O plugin Datatables serve para fazer uma tabela (HTML) depois de receber um JSON com os dados resultantes de uma consulta ao banco.

Até ai beleza, o problema é que como a estrutura da tabela é criada automaticamente pelo DataTables, não consigo atribuir um ID em cada linha(tr) da tabela.

Preciso inserir esses IDs dinamicamente, para depois poder manipular cada linha individualmente.

Porém não consigo ter acesso a criação dessa table.

Vocês poderiam me ajudar em como fazer essa atribuição de IDs nas tr das tables com o Datatables ?

Código de criação dos .

<?php

  // Ler e criar o array de dados
$dados = array();
while( $row_arquivo = mysqli_fetch_array($resultado_arquivos) ) {  
	$dado = array(); 
	$dado[] = utf8_encode(utf8_decode($row_arquivo["cod"]));   //Importante usar o utf8 em campos que vão conter acento pois dara erro no JSON
	$dado[] = utf8_encode(utf8_decode(substr($row_arquivo["empresa"],0,60)));
	$dado[] = utf8_encode(utf8_decode($row_arquivo["tributacao"]));
	$dado[] = utf8_encode(utf8_decode($row_arquivo["cnpj"]));
	$dado[] = "<a class='btn btn-sm btn-success' data-toggle='modal' 'data-target='#modal-alterar-empresas' style='border:1px solid black'>Alterar</a>";
	$dado[] = "<a class='btn btn-sm btn-info' data-toggle='modal' data-target='#modal-vincular-servicos' style='border:1px solid black'>Serviços</a>";
	$dado[] = "<a class='btn btn-sm btn-warning' data-toggle='modal' data-target='#modal-transferir-servicos' style='border:1px solid black'>Serviços</a>";
	$dados[] = $dado;
}

//Cria o array de informações a serem retornadas para o Javascript
$json_data = array(
	"draw" => intval( $requestData['draw'] ),//para cada requisição é enviado um número como parâmetro
	"recordsTotal" => intval( $qnt_linhas ),  //Quantidade de registros que há no banco de dados
	"recordsFiltered" => intval( $totalFiltered ), //Total de registros quando houver pesquisa
	"data" => $dados   //Array de dados completo dos dados retornados da tabela 
);

echo json_encode($json_data);  //enviar dados como formato json


?>

inserir a descrição da imagem aqui

3
  • 1
    Dá pra fazer, mas isso é muito desnecessário porque vc consegue pegar qualquer linha da tabela sem usar id.
    – Sam
    Commented 6/09/2019 às 18:40
  • @Sam como faz isso? Commented 6/09/2019 às 18:43
  • Vou ver se posto uma resposta.
    – Sam
    Commented 6/09/2019 às 18:44

1 Resposta 1

2

Você pode usar a API do Datatable para pegar qualquer linha, não precisa adicionar id's nelas.

Veja abaixo que eu aplico uma cor vermelha na segunda linha:

$(document).ready(function(){
   var tabela = $('#example').DataTable();
   
   var linha2 = tabela.row(1).nodes();
   $(linha2).css("color", "red");
   
});
<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.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display nowrap dataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="example_info"><thead><tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 190px;" aria-label="Position: activate to sort column ascending">Position</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 88px;" aria-label="Office: activate to sort column ascending">Office</th><th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 34px;" aria-label="Age: activate to sort column ascending">Age</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 79px;" aria-label="Start date: activate to sort column ascending">Start date</th><th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Salary: activate to sort column ascending">Salary</th></tr></thead><tbody><tr role="row" class="odd"><td tabindex="0" class="sorting_1">Airi Satou</td><td>Accountant</td><td>Tokyo</td><td class=" dt-body-right">33</td><td>2008/11/28</td><td class=" dt-body-right" style="display: none;">$162,700</td></tr><tr role="row" class="even"><td class="sorting_1" tabindex="0">Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td class=" dt-body-right">47</td><td>2009/10/09</td><td class=" dt-body-right" style="display: none;">$1,200,000</td></tr><tr role="row" class="odd"><td tabindex="0" class="sorting_1">Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td class=" dt-body-right">66</td><td>2009/01/12</td><td class=" dt-body-right" style="display: none;">$86,000</td></tr><tr role="row" class="even"><td class="sorting_1" tabindex="0">Bradley Greer</td><td>Software Engineer</td><td>London</td><td class=" dt-body-right">41</td><td>2012/10/13</td><td class=" dt-body-right" style="display: none;">$132,000</td></tr><tr role="row" class="odd"><td class="sorting_1" tabindex="0">Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td class=" dt-body-right">28</td><td>2011/06/07</td><td class=" dt-body-right" style="display: none;">$206,850</td></tr><tr role="row" class="even"><td tabindex="0" class="sorting_1">Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td class=" dt-body-right">61</td><td>2012/12/02</td><td class=" dt-body-right" style="display: none;">$372,000</td></tr><tr role="row" class="odd"><td class="sorting_1" tabindex="0">Bruno Nash</td><td>Software Engineer</td><td>London</td><td class=" dt-body-right">38</td><td>2011/05/03</td><td class=" dt-body-right" style="display: none;">$163,500</td></tr><tr role="row" class="even"><td class="sorting_1" tabindex="0">Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td class=" dt-body-right">21</td><td>2011/12/12</td><td class=" dt-body-right" style="display: none;">$106,450</td></tr><tr role="row" class="odd"><td class="sorting_1" tabindex="0">Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td class=" dt-body-right">46</td><td>2011/12/06</td><td class=" dt-body-right" style="display: none;">$145,600</td></tr><tr role="row" class="even"><td tabindex="0" class="sorting_1" style="">Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td class=" dt-body-right">22</td><td>2012/03/29</td><td class=" dt-body-right" style="display: none;">$433,060</td></tr></tbody><tfoot><tr><th rowspan="1" colspan="1">Name</th><th rowspan="1" colspan="1">Position</th><th rowspan="1" colspan="1">Office</th><th class="dt-body-right" rowspan="1" colspan="1">Age</th><th rowspan="1" colspan="1">Start date</th><th class="dt-body-right" rowspan="1" colspan="1" style="display: none;">Salary</th></tr></tfoot></table>

O código tabela.row(1).nodes() retorna o segundo elemento tr da tabela. As linhas começam com índice 0, ou seja, primeira linha seria tabela.row(0).nodes().

Se você quiser pegar a id das informações vindas do banco de dados, coloque nos botões um data-id='ID_DO_REGISTRO'. Assim você conseguirá pegar esse valor com $(this).data("id") ao clicar nos botões.

8
  • Mas é o seguinte, eu gostaria de atribuir um id em cada botão, pois estou criando esses botões no PHP. Vou mostrar a parte do código a parte que eu faço isso. Atualizarei a pergunta. Commented 6/09/2019 às 18:57
  • Eu abro um modal que é preenchido com dados, vindos do banco, de acordo com o ID da tr em que clico. Commented 6/09/2019 às 19:01
  • E o ID dessas <tr> não seriam 1,2,3,4... Seriam valores "desordenados" que viriam do banco. Commented 6/09/2019 às 19:12
  • O id é o número da coluna "cód."?
    – Sam
    Commented 6/09/2019 às 19:16
  • Não, o id da coluna é um campo (chamado 'codigo') que eu não listo ali. Commented 6/09/2019 às 19:17

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 .