Setting href dinamically for buttons in rows to access another razor page.

mauro89x

Hi, I'm working with a net core 3.1 app, razor pages and datatables with jquery.

My idea is to set a url to the three buttons in each row.

Here's what I've done so far

$('#externos-table').DataTable({
                ajax: {
                    url: 'https://localhost:5001/api/Alumnos/usuarios-externos',
                    dataSrc: 'externos',
                },
                columns: [
                    { data: 'nombre' },
                    { data: 'apellido' },
                    { data: 'dni' },
                    { data: 'email' },
                    { data: 'telefono' },
                    { data: 'provincia' },
                    { data: 'profesion' },
                    { data: 'lugarDeTrabajo' },
                    {
                        defaultContent: '<div style="display:flex;justify-content:space-around;">'
                            + '<button id="pagos" data-toggle="tooltip" data-placement="bottom" title="Pagos">'
                            + '<i class="fa-solid fa-dollar-sign"></i>'
                            + '</button>'
                            + '<button id="inscripciones" data-placement="bottom" title="Inscripciones">'
                            + '<i class="fa-solid fa-rectangle-list"></i>'
                            + '</button>'
                            + '<button id="editar" data-placement="bottom" title="Editar">'
                            + '<i class="fa-solid fa-pen-to-square"></i>'
                            + '</button>'
                            + '</div>',
                        orderable: false,
                        render: function (data, type, row, meta) {
  //                            I need to set the href attribute for the buttons above (#pagos, #inscripciones, #editar) to something like 
 // this 
                          //  a href="Administracion/inscripciones?alumnoId="' + row.alumnoId;
                        }
                    }
                ],
                language: {
                    "lengthMenu": "Mostrar _MENU_ filas por página",
                    "zeroRecords": "No se han encontrado resultados",
                    "info": "Mostrando página _PAGE_ de _PAGES_",
                    "infoEmpty": "No hay filas disponibles",
                    "infoFiltered": "(filtrado de _MAX_ filas)",
                    "search": ""
                }
            });

The idea is that each button from the rows will have an anchor tag with a href equal to an address . I'm using the render function, but I'm not sure how to get the button that's been processed each time to set the proper href.

Thanks!

kthorngren

If you want to dynamically set attributes, etc for the buttons then build the buttons in columns.render instead of columns.defaultContent. See this example.

Kevin