ja possui essa meta…
Código Wolf
DataTables - Ajax - PHP - MySql / MariaDB
<div class="row">
<div id="cuadro2" class="col-sm-12 col-md-12 col-lg-12 ocultar">
<form class="form-horizontal" action="" method="POST">
<div class="form-group">
<h3 class="col-sm-offset-2 col-sm-8 text-center">
Formulario de Registro de Usuarios</h3>
</div>
<input type="hidden" id="idusuario" name="idusuario" value="0">
<input type="hidden" id="opcion" name="opcion" value="registrar">
<div class="form-group">
<label for="nombre" class="col-sm-2 control-label">Nombres</label>
<div class="col-sm-8"><input id="nombre" name="nombre" type="text" class="form-control" autofocus></div>
</div>
<div class="form-group">
<label for="apellidos" class="col-sm-2 control-label">Apellidos</label>
<div class="col-sm-8"><input id="apellidos" name="apellidos" type="text" class="form-control" ></div>
</div>
<div class="form-group">
<label for="apellidos" class="col-sm-2 control-label">Dni</label>
<div class="col-sm-8"><input id="dni" name="dni" type="text" class="form-control" maxlength="8" ></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input id="" type="submit" class="btn btn-primary" value="Guardar">
<input id="btn_listar" type="button" class="btn btn-primary" value="Listar">
</div>
</div>
</form>
<div class="col-sm-offset-2 col-sm-8">
<p class="mensaje"></p>
</div>
</div>
</div>
<div class="row">
<div id="cuadro1" class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-offset-2 col-sm-8">
<h3 class="text-center"> <small class="mensaje"></small></h3>
</div>
<div class="table-responsive col-sm-12">
<table id="dt_cliente" class="table table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Dni</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div>
<form id="frmEliminarUsuario" action="" method="POST">
<input type="hidden" id="idusuario" name="idusuario" value="">
<input type="hidden" id="opcion" name="opcion" value="eliminar">
<!-- Modal -->
<div class="modal fade" id="modalEliminar" tabindex="-1" role="dialog" aria-labelledby="modalEliminarLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalEliminarLabel">Eliminar Usuario</h4>
</div>
<div class="modal-body">
¿Está seguro de eliminar al usuario?<strong data-name=""></strong>
</div>
<div class="modal-footer">
<button type="button" id="eliminar-usuario" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
</form>
</div>
<script src="js/jquery-1.12.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<!--botones DataTables-->
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.bootstrap.min.js"></script>
<!--Libreria para exportar Excel-->
<script src="js/jszip.min.js"></script>
<!--Librerias para exportar PDF-->
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<!--Librerias para botones de exportación-->
<script src="js/buttons.html5.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ajax.js" [b]charset="ISO-8859-1"[/b]></script>
<script>
$(document).on("ready", function(){
listar();
guardar();
eliminar();
});
$("#btn_listar").on("click", function(){
listar();
});
var guardar = function(){
$("form").on("submit", function(e){
e.preventDefault();
var frm = $(this).serialize();
$.ajax({
method: "POST",
url: "guardar.php",
data: frm
}).done( function( info ){
console.log( info );
var json_info = JSON.parse( info );
mostrar_mensaje( json_info );
limpiar_datos();
listar();
});
});
}
var eliminar = function(){
$("#eliminar-usuario").on("click", function(){
var idusuario = $("#frmEliminarUsuario #idusuario").val(),
opcion = $("#frmEliminarUsuario #opcion").val();
$.ajax({
method:"POST",
url: "guardar.php",
data: {"idusuario": idusuario, "opcion": opcion}
}).done( function( info ){
var json_info = JSON.parse( info );
mostrar_mensaje( json_info );
limpiar_datos();
listar();
});
});
}
var mostrar_mensaje = function( informacion ){
var texto = "", color = "";
if( informacion.respuesta == "BIEN" ){
texto = "<strong>Bien!</strong> Se han guardado los cambios correctamente.";
color = "#379911";
}else if( informacion.respuesta == "ERROR"){
texto = "<strong>Error</strong>, no se ejecutó la consulta.";
color = "#C9302C";
}else if( informacion.respuesta == "EXISTE" ){
texto = "<strong>Información!</strong> el usuario ya existe.";
color = "#5b94c5";
}else if( informacion.respuesta == "VACIO" ){
texto = "<strong>Advertencia!</strong> debe llenar todos los campos solicitados.";
color = "#ddb11d";
}else if( informacion.respuesta == "OPCION_VACIA" ){
texto = "<strong>Advertencia!</strong> la opción no existe o esta vacia, recargar la página.";
color = "#ddb11d";
}
$(".mensaje").html( texto ).css({"color": color });
$(".mensaje").fadeOut(5000, function(){
$(this).html("");
$(this).fadeIn(3000);
});
}
var limpiar_datos = function(){
$("#opcion").val("registrar");
$("#idusuario").val("");
$("#nombre").val("").focus();
$("#apellidos").val("");
$("#dni").val("");
}
var listar = function(){
$("#cuadro2").slideUp("slow");
$("#cuadro1").slideDown("slow");
var table = $("#dt_cliente").DataTable({
"destroy":true,
"ajax":{
"method":"POST",
"url": "listar.php"
},
"columns":[
{"data":"nombre"},
{"data":"apellidos"},
{"data":"dni"},
{"defaultContent": "<button type='button' class='editar btn btn-primary'><i class='fa fa-pencil-square-o'></i></button> <button type='button' class='eliminar btn btn-danger' data-toggle='modal' data-target='#modalEliminar' ><i class='fa fa-trash-o'></i></button>"}
],
"language": idioma_espanol,
"dom": "<'row'<'form-inline' <'col-sm-offset-5'B>>>"
+"<'row' <'form-inline' <'col-sm-1'f>>>"
+"<rt>"
+"<'row'<'form-inline'"
+" <'col-sm-6 col-md-6 col-lg-6'l>"
+"<'col-sm-6 col-md-6 col-lg-6'p>>>",//'Bfrtip',
"buttons":[
{
"text": "<i class='fa fa-user-plus'></i>",
"titleAttr": "Agregar Usuario",
"className": "btn btn-success",
"action": function(){
agregar_nuevo_usuario();
}
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i>',
titleAttr: 'CSV'
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF'
}
]
});
obtener_data_editar("#dt_cliente tbody", table);
obtener_id_eliminar("#dt_cliente tbody", table);
}
var agregar_nuevo_usuario = function(){
limpiar_datos();
$("#cuadro2").slideDown("slow");
$("#cuadro1").slideUp("slow");
}
var obtener_data_editar = function(tbody, table){
$(tbody).on("click", "button.editar", function(){
var data = table.row( $(this).parents("tr") ).data();
var idusuario = $("#idusuario").val( data.idusuario ),
nombre = $("#nombre").val( data.nombre ),
apellidos = $("#apellidos").val( data.apellidos ),
dni = $("#dni").val( data.dni ),
opcion = $("#opcion").val("modificar");
$("#cuadro2").slideDown("slow");
$("#cuadro1").slideUp("slow");
});
}
var obtener_id_eliminar = function(tbody, table){
$(tbody).on("click", "button.eliminar", function(){
var data = table.row( $(this).parents("tr") ).data();
var idusuario = $("#frmEliminarUsuario #idusuario").val( data.idusuario );
});
}
var idioma_espanol = {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
}
</script>