JSFiddle - React, Tailwind, and code Playground

by Miguel Pacifico

HTML

<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<button id="btnGetId">Obter Id</button>
<hr>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Id</th>
            <th>Nome</th>
            <th>Telefone</th>
            <th>Endereço</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>01</th>
            <th>Maria</th>
            <th>9988-7766</th>
            <th>Avenida A</th>
        </tr>
        <tr>
            <th>02</th>
            <th>Maria</th>
            <th>9988-7766</th>
            <th>Avenida A</th>
        </tr>
        <tr>
            <th>03</th>
            <th>Maria</th>
            <th>9988-7766</th>
            <th>Avenida A</th>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function() {
	
    $('#example').dataTable( {
        "language": {
            "lengthMenu": "Exibir _MENU_ registros por página",
            "zeroRecords": "Nenhum Registro encontrado",
            "info": "Exibindo página _PAGE_ de _PAGES_",
            "infoEmpty": "Sem registros diposníveis"
        }
    } );
	
	
    var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
		
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }		
		
		
    } );
 
    $('#btnGetId').click( function () {
        table.row('.selected').alert("oi");
    } );
	
} );