2

quisiera saber si hay alguna forma para poder llamar un sweetalert dentro de un datatable, tengo este codigo.

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"
                },
            }
        });
};

en el sweetalert puse esto:

 //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");   
            } 
        });
    });

se supone que por el id deberia de funcionar pero no lo hace, pero cuando hago un boton fuera del data table como parte de mi pagina y le pongo el id sa-params si salta el sweetalert.

2 respuestas 2

0

En primer lugar el id deberia de ser unico, o sea que no puedes tener uno por fila, usa una clase en lugar de id. Segundo, los objetos dinamicos tienes que amarrarlos con on(). Algo asi:

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"
            },
        }
    });
};

Y el 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");   
        } 
    });
});
1
  • si tienes razon es por el id y por el <i></i> al parecer el icono hace conflicto lo puse como span, encontre una respuesta gracias.
    – Nik.Code
    el 9 ago. 2018 a las 19:37
0

https://stackoverflow.com/questions/31898143/remove-row-in-data-table-with-sweetalert-confirmation/31898545#31898545

ahi encontre la respuesta, y de esta manera llame a mi sweetalert y mi boton

<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");   
                } 
            });        
        });

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.