select row by passing a field id

silens · November 2018

I would like to be able to select a row with a specific id that I pass
I would like to select a specific row when starting the table
Gracias.

rf1234 · November 2018

Silens, mi amigo. How have you been doing?

Something like this should work:

var yourPassedId = ... wherever you  get the id from ...;

var yourTable= $('#yourTable').DataTable( { 
    .....
});

yourTable.on('init', function () {        
    var rowToSelect = '#row_' + yourPassedId;
    yourTable.row(rowToSelect).select();
});

silens · November 2018

Hola, gracias por contestar, Estoy recibiendo el siguiente error:

tblRevTarDir.row(...).select is not a function

Gracias amigo

rf1234 · November 2018

Can you post your code please. Do you have the select extension installed?

silens · November 2018


function proyectoFueraPlazo(){
                  tblProyectosFueraPlazo = $('#tblProyectosSegDir').DataTable({
            stateSave: true, //Guarda el estado de la tabla, orden, pagina etc
            "stateDuration": -1,
            "scrollY": '15vh',
            "scrollCollapse": true,
            "scrollX": false,
            "bLengthChange": false,
            "bPaginate": false,
             "bInfo": false,
             "searching": false,
            "autoWidth": false,
            
            "responsive": {
                "details": false,
            },
            "destroy": "true",
        
        "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json"
            },
                
            "order": [[1, 'asc']],
            
            "columnDefs": [
                {"visible": false,"targets": 0},
                
            ],
            
            
            "ajax": {
                "url": "php/PlnDir/pry_fuera_plz.php",
                "type": "POST",
                "dataSrc": "",
            },
            "columns": [{
                    "data": "id"
                }, {
                    "data": "name"
                }],
        });
        
        $('#tblProyectosSegDir tbody').off('click', 'tr'); 
        $('#tblProyectosSegDir tbody').on('click', 'tr', function () {
            var idPry = tblProyectosFueraPlazo.row( this ).data();
            sessionStorage.setItem('idPryFueraPlazo', idPry['id']); // Guardo la sesion del id de fila seleccionado
            historia_x_proyecto_DirFueraPlazo(idPry['id'],"pryFueraPlazo");
            $("#tblProyectosSegDir tbody tr").removeClass('selected');      
            $(this).addClass('selected');
            
            var tblTareasCDir = $('#tblTareasCDir').DataTable();//Reseteo la tabla de tareas al ir cambiando de proyecto
            tblTareasCDir.clear().draw();
        }); 
        
        
        
}

rf1234 · November 2018

Hmmm, I don't see any of the relevant code in there?!

I would add this at the bottom of your function proyectoFueraPlazo(yourPassedId) which you need to pass the id to.

tblProyectosFueraPlazo.on('init', function () {       
    var rowToSelect = '#row_' + yourPassedId;
    tblProyectosFueraPlazo.row(rowToSelect).select();
});

I use the "init" event here because you said "I would like to select a specific row when starting the table" which I interpreted as meaning "when the table gets initialized".

silens · November 2018

Por ejemplo, id=0;

function proyectoFueraPlazo(){ 
    
    tblProyectosFueraPlazo = $('#tblProyectosSegDir').DataTable({
            stateSave: true, //Guarda el estado de la tabla, orden, pagina etc
            "stateDuration": -1,
            "scrollY": '15vh',
            "scrollCollapse": true,
            "scrollX": false,
            "bLengthChange": false,
            "bPaginate": false,
             "bInfo": false,
             "searching": false,
            "autoWidth": false,
            
            "responsive": {
                "details": false,
            },
            "destroy": "true",
        
        "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json"
            },
                
            "order": [[1, 'asc']],
            
            "columnDefs": [
                {"visible": false,"targets": 0},
                
            ],
            
            
            "ajax": {
                "url": "php/PlnDir/pry_fuera_plz.php",
                "type": "POST",
                "dataSrc": "",
            },
            "columns": [
            {
                "data": 'id',
                render: function (data, type, row) {
                    //if(data == 3)
                                                  {
                                                  //Aqui puedo hacer el select
                                                 }
                               return(data);
                }
            },

            {
                    "data": "name"
            }],
        });
        
        $('#tblProyectosSegDir tbody').off('click', 'tr'); 
        $('#tblProyectosSegDir tbody').on('click', 'tr', function () {
            var idPry = tblProyectosFueraPlazo.row( this ).data();
            sessionStorage.setItem('idPryFueraPlazo', idPry['id']); 
            historia_x_proyecto_DirFueraPlazo(idPry['id'],"pryFueraPlazo");
            $("#tblProyectosSegDir tbody tr").removeClass('selected');      
            $(this).addClass('selected');
            var tblTareasCDir = $('#tblTareasCDir').DataTable();
            tblTareasCDir.clear().draw();
        }); 
        
        
        tblProyectosFueraPlazo.on('init', function () {      
            var rowToSelect = '#row_' + 0;
            tblProyectosFueraPlazo.row(rowToSelect).select();
        });
}

Recibo un error:
tblProyectosFueraPlazo.row(...).selected is not a function

rf1234 · November 2018

Don't know what causes this error but one thing is clear: You won't have a row with an id of 0 in your table ...

I use the same thing and it works fine. So sorry that I cannot resolve this. You would need to post a test case I guess and ask @allan for help. Sorry.

rf1234 · November 2018

Here is a different way to select a row based on a passed id. Maybe you want to try this: I read the id from a cookie and then loop through all rows of my table and compare the passed id with the id of the row. I think I built this quite a while ago but it still works. Finally I make sure that I am on the right page I guess. That's the draw() at the end:

contractTable
    .on ('init', function () {
    //coming from inbox proposal remarks in order to revise the proposal
    //all we need to do is to select the respective proposal
        govdeptIdConnected = '';
        govdeptIdConnected = Cookies.get('govdeptIdConnected')
        if (govdeptIdConnected > '') {
            Cookies.remove('govdeptIdConnected');
            contractGovDeptTable.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                var data = this.data();
                if ( data.govdept_has_user.govdept_id === govdeptIdConnected ) {
                    contractGovDeptTable.row(this).select();
                }
             } );
            govdeptIdConnected = '';
            contractGovDeptTable.page.len( -1 ).draw();
        }
    } )

This may look a bit odd but it also works. I get the selectedId, unselect the record and reselect it 200 milliseconds later. Purely for technical reasons:

.on( 'postSubmit', function ( e, json, data, action ) {
    if (! json.error && ! json.fieldErrors) {
        if (action === 'edit') {
            //after editing we need to refresh the child tables;
            //which table is displayed depends on the instrument type!!
            var selectedId = '#' + proposalCredTable.row( {selected: true} ).id();
            proposalCredTable.row(selectedId).deselect();
            //the new select needs to wait for 200 miliseconds - otherwise it does not work
            setTimeout(function(){ proposalCredTable.row(selectedId).select(); }, 200);
        } else {
            if ( action === 'remove' ) {
                hideTbls( [proposalFixedCredTable, proposalVariableCredTable,
                        proposalRfaCredTable] );
            }
        }
    }
});

silens · November 2018

Holaa, mi solución:

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        idPryNtactil = sessionStorage.getItem('idProyNtactil');
        if (aData["id"] == idPryNtactil) $(nRow).addClass('selected');
    },

Parece que fuciona bien. Muchas graciass

rf1234 · November 2018

Many ways lead to Rome! Glad you got it working!

select row by passing a field id

select row by passing a field id

Answers

Howdy, Stranger!

Categories

DataTables

select row by passing a field id

select row by passing a field id

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables