CODEWITHSUNDEEP
jquerydatatables
Pablo Tobar
Pablo Tobar

Reputation: 634

retrieve the info of a datatable jquery row in a input text

I use datatable jQuery to show data from a table and have added a button <button>editar</button> to every row and it works fine when it comes to show the data and the button in every row, but I want to retrieve the info of a specific row in a input type, the problem is that I don't know how to capture the event click of the button inside the datatable and retrieve the info, could you please help me, this is my code so far:

       $(document).ready(function () {
            $('#myTable').DataTable({
                searching: false,
                paging: true,
                responsive: true,
                "ajax": {
                    "url": "/home/loaddata",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                        { "data": "pais", "autoWidth": true, "orderable": true },
                        { "data": "nombres", "autoWidth": true, "orderable": false },
                        { "data": "telefono", "autoWidth": true, "orderable": false },
                        { "data": "correo", "autoWidth": true, "orderable": false },
                        { "data": "dui", "autoWidth": true, "orderable": false },
                        { "data": "nit", "autoWidth": true, "orderable": false },
                        { "defaultContent": "<button>editar</button>"}
                ],
                "oLanguage": {
                    "sEmptyTable": "No hay registros disponibles",
                    "sInfo": "Hay _TOTAL_ registros. Mostrando de (_START_ a _END_)",
                    "sLoadingRecords": "Por favor espera - Cargando...",
                    "sSearch": "Filtro:",
                    "sLengthMenu": "Mostrar _MENU_",
                    "oPaginate": {
                        "sLast": "Última página",
                        "sFirst": "Primera",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    }
                }

            });

            //This is the problem
            $('#myTable tbody').on('click', 'button.editar', function () {

                    alert("you just pressed the button");

            });

        });
    </script>

Upvotes: 0

Views: 43

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

Use the code below:

$('#myTable tbody').on('click', 'button', function () {
   var data = $('#myTable').DataTable().row($(this).closest('tr')).data();

   console.log(data, data['nombres']);
});

Upvotes: 1

Related Questions