Highlighted row blurred after click in a second Datatable

viniciusbtu

Hi, Im created more than one Data Table in the same page to work with more than one dataset. My problem is, when i click or press keyboard arrows in a row of the First table (Mother) the row was highlighted an call a function to populate the Second Table(Child), until then no problem.
When i click or press keyboard arrows in a row of the second table(child) the row in the First Table(mother) gets blured.

I need to let firts table(mother) row highlited and stil get the row in the second table(child) highlited too.

Can anyone help me? There's my code below:

           var tbl_exame = $('#exames').DataTable( {
                 "iDisplayLength": 10,
                 "order": [[ 0, "asc" ]],
                 "language": {"url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"},
                  "processing": true,
                  "serverSide": true,
                  "scrollX": true,
                  "keys": { 
                    "blurable": false,
                    "keys":[13,38,40]
                     },  
                  "ajax": {
                      "url": "load_exames.php",
                      "type": "GET"       
                  },
                  "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                     $('td', nRow).attr('nowrap','nowrap');
                          return nRow;
                      }                   
     });

             // Handle event when cell gains focus
    $('#exames').on('key-focus.dt', function(e, datatable, cell){
        // Select highlighted row
         $(tbl_exame.row(cell.index().row).node()).addClass('selected');


            // Pega informação da linha.
            var dado = tbl_exame.row(cell.index().row).data()+'';
            var str_exame = dado.split(",");
            var idexame = str_exame[0];


        // Gera os dados dos materiais
            $.ajax({
            method: 'POST',
            url: 'load_materiais.php',
            data: {exame: idexame} }).done(function (result) {
                 result = JSON.parse(result);
                 tbl_materiais.clear();
                 tbl_materiais.rows.add(result.data).draw();
             });
    });


              // Handle event when cell looses focus
               $('#exames').on('key-blur.dt', function(e, datatable, cell){
             // Deselect highlighted row
              $(tbl_exame.row(cell.index().row).node()).removeClass('selected');
        });


                         // Declarando Tbl de Materiais     


            var tbl_materiais = $('#materiais').DataTable({
                  "iDisplayLength": 10,
                  "order": [[ 0, "asc" ]],
                  "language": {"url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"},
                  "processing": true,
                  "scrollX": true,
                  "searching": false, 
                      "paging": false, 
                  "ordering": false,
                   "keys": { 
                       "blurable": false,
                    "keys":[13,38,40]
                    }, 
                   "columnDefs": [{ "targets": [ 0 ], "visible": false, "searchable": false }],
                    "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                                    $('td', nRow).attr('nowrap','nowrap');
                             return nRow;
                                  } 

            }); 

                      // Handle event when cell gains focus
                    $('#materiais').on('key-focus.dt', function(e, datatable, cell){
                        // Select highlighted row
                        $(tbl_materiais.row(cell.index().row).node()).addClass('selected');
                    });

                    // Handle event when cell looses focus
                    $('#materiais').on('key-blur.dt', function(e, datatable, cell){
                        // Deselect highlighted row
                        $(tbl_materiais.row(cell.index().row).node()).removeClass('selected');
                    });

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin