How to get ID from Selected Row!?

Katia666

Hello Guy's, im working with this:
https://www.gotbootstrap.com/themes/smartadmin/4.4.5/datatables_alteditor.html

and i have problem to use the DELETE Buttom...
(onDeleteRow)

(i added the New and Edit buttons (onAddRow, onEditRow)without problem..) but i have problems to delete buttom... i can't recover the selected row ID to send it a url!

<script>


           $(document).ready(function()

                  
            {

                // Event Lot
                var events = $("#app-eventlog");

                // Column Definitions
                var columnSet = [
                {
                    title: "ID",
                    id: "DT_RowId",
                    data: "DT_RowId",
                    placeholderMsg: "Server Generated ID",
                    "visible": true,
                    "searchable": false,
                    type: "readonly"
                },
                {
                    title: "Nombre",
                    id: "name",
                    data: "name"
                },
                {
                    title: "action",
                    id: "action",
                    data: "action",
                }]


                /* start data table */
                var myTable = $('#dt-basic-example').dataTable(
                {
                    /* check datatable buttons page for more info on how this DOM structure works */
                    dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                    ajax: "{{ route('datatable.customers') }}",
                    columns: columnSet,
                    /* selecting multiple rows will not work */
                    select: 'single',
                    /* altEditor at work */
                    altEditor: true,
                    responsive: true,
                    /* buttons uses classes from bootstrap, see buttons page for more details */
                    buttons: [
                    {
                        extend: 'selected',
                        text: '<i class="fal fa-times mr-1"></i> Delete',
                        name: 'delete',
                        className: 'btn-primary btn-sm mr-1'
                    },
                    {
                        extend: 'selected',
                        text: '<i class="fal fa-edit mr-1"></i> Edit',
                        name: 'edit',
                        className: 'btn-primary btn-sm mr-1'
                    },
                    {
                        text: '<i class="fal fa-plus mr-1"></i> Add',
                        name: 'add',
                        className: 'btn-success btn-sm mr-1'
                    },
                    {
                        text: '<i class="fal fa-sync mr-1"></i> Synchronize',
                        name: 'refresh',
                        className: 'btn-primary btn-sm'
                    }],


                    /* default callback for insertion: mock webservice, always success */
                    onAddRow: function(dt, rowdata, success, error)
                    {

                        $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
    });

       
      $.ajax({
          data: rowdata,
          url: "{{ route('postcustomer') }}",
          type: "POST",
          dataType: 'json',
      });


                    },


                    onDeleteRow: function(dt, rowdata, success, error)
                    {
                        $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
    });

       
      $.ajax({
          data: rowdata,
          url: "{{ route('delcustomer') }}" +/ +DT_RowId,
          type: "POST",
          dataType: 'json',
      });
                    },
                });

                

            });

        </script>

kthorngren

This example show how to get the selected row/rows:
https://datatables.net/extensions/select/examples/api/get.html

You can then use row().id() to get teh row ID (DT_RowId).

Kevin

Katia666

Hi Kevin, first of all thank you very much for the reply.

It served me but not 100%

I manage to get the ID using the following code, but I need to add it to the existing function and that is what I don't understand how to pass the ID.

var table = $('#dt-basic-example').DataTable( {
        dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        ajax: "{{ route('datatable.customers') }}",
        select: true,
        columns: columnSet,
        buttons: [
            {
                        extend: 'selected',
                        text: '<i class="fal fa-times mr-1"></i> Delete',
                        name: 'delete',
                        className: 'btn-primary btn-sm mr-1',
                        action: function () {
                    var id = table.row( { selected: true } ).id();

                    $.ajax({

          url: "{{route('delcustomer', "")}}/"+id,
                });

                }
                    },
            {
                text: 'Get selected data',
                action: function () {
                    var count = table.row( { selected: true } ).id();

                    events.prepend( '<div>'+count+' row(s) selected</div>' );
                }
            }
        ],

Adding a button I get it to work but I need to take that code to the existing button that when activated executes a modal ... and when accepted it executes the function inside onDeleteRow ()

I need something like this:

onDeleteRow: function () {
                    var id = table.row( { selected: true } ).id();

                    $.ajax({

          url: "{{route('delcustomer', "")}}/"+id,
                });

                }
                    },
            {
                text: 'Get selected data',
                action: function () {
                    var count = table.row( { selected: true } ).id();

                    events.prepend( '<div>'+count+' row(s) selected</div>' );
                }
            }

kthorngren

Do you get errors in the browser's console?

What is the value of id in the onDeleteRow() function?

Kevin

Katia666

SOLVEEEDDD!!!!

Kevin, the error ever are "undefined" but...

I do not know what happened, I am 100% sure that this had already done and had not worked, perhaps I had some typing failure and because I was crazy with this code I was overlooked ... the truth is a mystery LOL ... many thanks!

SOLUTION:

onDeleteRow: function () {
                        var idrow= table.row( { selected: true } ).id();
                        alert(+idrow);

                        $.ajax({

          url: "{{route('delcustomer', "")}}/"+idrow,
                });
                },