how to call a sweetalert from a datatable.net?

2

I would like to know if there is any way to call a sweetalert within a datatable, I have this code.

function TablaTrabajador() {
        $('#myTable').DataTable({
            'ajax': {
                "url": "/Trabajador/VerTrabajador",
                "type": "POST",
                dataSrc: '',
            },
            'columns': [
              { data: "T_Documento" },
              { data: "N_Documento" },
              { data: "Nom_Trabajador" },
              { data: "NomOficina" },
              { data: "Ubicacion" },
              { data: "DesCampo" },
              {
                  "orderable": true,
                  render: function (data, type, row) {
                      return '<span class="pull-center">' +
                        '<button type="button" class="btn btn-warning btn-outline btn-circle btn-lg m-r-5" ' +
                        'onclick="EditarTrabajador(\'' + row.TipDocumento + '\',\'' + row.N_Documento + '\', \'' + row.NomTrabajador + '\', \'' + row.PatTrabajador +
                        '\', \'' + row.MatTrabajador + '\', \'' + row.CodOficina + '\',\'' + row.CodUbigeo + '\' ,\'' + row.TipTrabajador + '\')"' +
                        'data-toggle="modal"><i class="ti-pencil-alt"></i></button>' +
                         '<button  type="button" class="btn btn-danger btn-outline btn-circle btn-lg m-r-5" id="sa-params"><i class="icon-trash"></i></button>' +

                        '</span>';
                  }
              }
            ],
            "order": [
              [1, "asc"]
            ],
            "language": {
                "lengthMenu": "Mostrar _MENU_ registros",
                "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtrada de _MAX_ registros)",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "No se encontraron registros",
                "paginate": {
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
            }
        });
};

in the sweetalert I put this:

 //Parameter
    $('#sa-params').click(function(){
        swal({   
            title: "Estas Seguro?",   
            text: "You will not be able to recover this imaginary file!",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Si, Eliminar Esto!",   
            cancelButtonText: "No, Cancelar Pls!",   
            closeOnConfirm: false,   
            closeOnCancel: false 
        }, function(isConfirm){   
            if (isConfirm) {     
                swal("Deleted!", "Your imaginary file has been deleted.", "success");   
            } else {     
                swal("Cancelled", "Your imaginary file is safe :)", "error");   
            } 
        });
    });

It is assumed that the id should work but it does not, but when I make a button outside the data table as part of my page and I put the id sa-params if the sweetalert jumps.

    
asked by Nik.Code 09.08.2018 в 21:21
source

2 answers

0

First the id should be unique, so you can not have one per row, use a class instead of id. Second, dynamic objects have to be tied with on() . Something like this:

function TablaTrabajador() {
    $('#myTable').DataTable({
        'ajax': {
            "url": "/Trabajador/VerTrabajador",
            "type": "POST",
            dataSrc: '',
        },
        'columns': [
          { data: "T_Documento" },
          { data: "N_Documento" },
          { data: "Nom_Trabajador" },
          { data: "NomOficina" },
          { data: "Ubicacion" },
          { data: "DesCampo" },
          {
              "orderable": true,
              render: function (data, type, row) {
                  return '<span class="pull-center">' +
                    '<button type="button" class="btn btn-warning btn-outline btn-circle btn-lg m-r-5" ' +
                    'onclick="EditarTrabajador(\'' + row.TipDocumento + '\',\'' + row.N_Documento + '\', \'' + row.NomTrabajador + '\', \'' + row.PatTrabajador +
                    '\', \'' + row.MatTrabajador + '\', \'' + row.CodOficina + '\',\'' + row.CodUbigeo + '\' ,\'' + row.TipTrabajador + '\')"' +
                    'data-toggle="modal"><i class="ti-pencil-alt"></i></button>' +
                     '<button  type="button" class="btn btn-danger btn-outline btn-circle btn-lg m-r-5 sa-params" ><i class="icon-trash"></i></button>' +

                    '</span>';
              }
          }
        ],
        "order": [
          [1, "asc"]
        ],
        "language": {
            "lengthMenu": "Mostrar _MENU_ registros",
            "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(filtrada de _MAX_ registros)",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "zeroRecords": "No se encontraron registros",
            "paginate": {
                "next": "Siguiente",
                "previous": "Anterior"
            },
        }
    });
};

And the alert:

$('#myTable').on('click', '.sa-params', function(){
    swal({   
        title: "Estas Seguro?",   
        text: "You will not be able to recover this imaginary file!",   
        type: "warning",   
        showCancelButton: true,   
        confirmButtonColor: "#DD6B55",   
        confirmButtonText: "Si, Eliminar Esto!",   
        cancelButtonText: "No, Cancelar Pls!",   
        closeOnConfirm: false,   
        closeOnCancel: false 
    }, function(isConfirm){   
        if (isConfirm) {     
            swal("Deleted!", "Your imaginary file has been deleted.", "success");   
        } else {     
            swal("Cancelled", "Your imaginary file is safe :)", "error");   
        } 
    });
});
    
answered by 09.08.2018 в 21:29
0

link

There I found the answer, and in this way I called my sweetalert and my button

<button  type="button" class="btn btn-danger btn-outline btn-circle btn-lg m-r-5" data-target="#delete" data-title="Delete" data-toggle="modal">                        <span class="icon-trash"></button>




$('#myTable tbody').on('click', 'button[data-target="#delete"]', function () {
            var btn = this;
            swal({   
                title: "Estas Seguro?",   
                text: "You will not be able to recover this imaginary file!",   
                type: "warning",
                html: true,   
                showCancelButton: true,   
                confirmButtonColor: "#DD6B55",   
                confirmButtonText: "Si, Eliminar Esto!",   
                cancelButtonText: "No, Cancelar Pls!",   
                closeOnConfirm: false,   
                closeOnCancel: false 
            }, function(isConfirm){   
                if (isConfirm) {     
                    swal("Deleted!", "Your imaginary file has been deleted.", "success");   
                } else {     
                    swal("Cancelled", "Your imaginary file is safe :)", "error");   
                } 
            });        
        });
    
answered by 09.08.2018 в 21:42