How to get ID from Selected Row!?

How to get ID from Selected Row!?

Katia666Katia666 Posts: 3Questions: 1Answers: 0
edited April 2020 in Free community support

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>

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • Katia666Katia666 Posts: 3Questions: 1Answers: 0

    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>' );
                    }
                }
    
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Do you get errors in the browser's console?

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

    Kevin

  • Katia666Katia666 Posts: 3Questions: 1Answers: 0

    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,
                    });
                    },
    
This discussion has been closed.