[EDIT] ListadoPersona arreglado

web/js/pages/persona.js

+/* 
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+
 $(document).ready(function () {
 
     listarPersonaTest();
@@ -10,6 +17,8 @@ $(document).ready(function () {
         limpiarInputs();
     });
 
+
+
 });
 
 var codigoPersona;
@@ -18,6 +27,7 @@ function init() {
     listarPersona();
     registrarPersona();
     editarPersona();
+    accionesPersona(); // ACTIVAR - DESACTIVAR - EDITAR
 }
 
 function listarPersonaTest() {
@@ -159,9 +169,10 @@ function editarPersona() {
 }
 
 function listarPersona() {
+
     var txt_criterio_busqueda = $('#txt_criterio_busqueda').val().trim();
 
-    var tabla_persona = $('#tabla_persona').DataTable({
+    $('#tabla_persona').DataTable({
         language: {
             paginate: {'next': '→ ', 'previous': ' ←'},
             emptyTable: 'No hay registros'
@@ -170,10 +181,19 @@ function listarPersona() {
             url: '../PersonaServlet?accion=listarPersona',
             type: 'POST',
             dataType: 'json',
-            data: {
-                search: txt_criterio_busqueda
-            }
+            data: {search: txt_criterio_busqueda}
         },
+        columnDefs: [
+            {"targets": 0, "orderable": false, "width": "5%", "className": "centrado"},
+            {"targets": 1, "orderable": false, "width": "15%", "className": "centrado"},
+            {"targets": 2, "orderable": false, "width": "30%", "className": "centrado"},
+            {"targets": 3, "orderable": false, "width": "5%", "className": "centrado"},
+            {"targets": 4, "orderable": false, "width": "25%", "className": "centrado"},
+            {"targets": 5, "orderable": false, "width": "10%", "className": "centrado"},
+            {"targets": 6, "orderable": false, "width": "10%", "className": "centrado"}
+        ],
+        dom: '<"datatable-scroll"t><"datatable-footer"ip>',
+        fixedColumns: true,
         processing: true,
         serverSide: true,
         responsive: true,
@@ -232,104 +252,106 @@ function listarPersona() {
     });
 }
 
-$('#tabla_persona tbody').on('click', '.editarPersona', function () {
-    var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
-    console.log(data_row);
-    codigoPersona = '';
-    $('#txt_numero_documento_editar').val(data_row.dni);
-    $('#txt_apellidos_editar').val(data_row.apellidos);
-    $('#txt_nombres_editar').val(data_row.nombres);
-    $('#txt_edad_editar').val(data_row.edad);
-    $('#txt_correo_editar').val(data_row.correo);
-    codigoPersona = data_row.codigo;
-});
-
-$('#tabla_persona tbody').on('click', '.desactivarPersona', function () {
-
-    var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
-    var json = {
-        codigo: data_row.codigo
-    };
-
-    swal({
-        title: "¿Estás seguro?",
-        text: "¿Desea desactivar a " + data_row.apellidos + ", " + data_row.nombres + " ?",
-        type: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#EF5350",
-        confirmButtonText: "Si!",
-        cancelButtonText: "No!",
-        closeOnConfirm: false,
-        closeOnCancel: true
-    },
-        function (isConfirm) {
-            if (isConfirm) {
-                $.ajax({
-                    url: '../PersonaServlet?accion=desactivarPersona',
-                    type: 'POST',
-                    dataType: 'json',
-                    data: {json: JSON.stringify(json)},
-                    beforeSend: function (xhr) {
-                    },
-                    success: function (data, textStatus, jqXHR) {
-                        console.log(data);
-                        var status = data.status;
-                        if (status) {
-                            imprimirAlerta('Desactivado!', data_row.apellidos + ', ' + data_row.nombres + ' fue desactivado con exito!', 'success');
-                            recargarTabla();
-                        } else {
-                            imprimirAlerta('Error!', data.message, 'error');
-                        }
+function accionesPersona() {
+    $('#tabla_persona tbody').on('click', '.editarPersona', function () {
+        var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
+        console.log(data_row);
+        codigoPersona = '';
+        $('#txt_numero_documento_editar').val(data_row.dni);
+        $('#txt_apellidos_editar').val(data_row.apellidos);
+        $('#txt_nombres_editar').val(data_row.nombres);
+        $('#txt_edad_editar').val(data_row.edad);
+        $('#txt_correo_editar').val(data_row.correo);
+        codigoPersona = data_row.codigo;
+    });
 
+    $('#tabla_persona tbody').on('click', '.desactivarPersona', function () {
+
+        var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
+        var json = {
+            codigo: data_row.codigo
+        };
+
+        swal({
+            title: "¿Estás seguro?",
+            text: "¿Desea desactivar a " + data_row.apellidos + ", " + data_row.nombres + " ?",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#EF5350",
+            confirmButtonText: "Si!",
+            cancelButtonText: "No!",
+            closeOnConfirm: false,
+            closeOnCancel: true
+        },
+                function (isConfirm) {
+                    if (isConfirm) {
+                        $.ajax({
+                            url: '../PersonaServlet?accion=desactivarPersona',
+                            type: 'POST',
+                            dataType: 'json',
+                            data: {json: JSON.stringify(json)},
+                            beforeSend: function (xhr) {
+                            },
+                            success: function (data, textStatus, jqXHR) {
+                                console.log(data);
+                                var status = data.status;
+                                if (status) {
+                                    imprimirAlerta('Desactivado!', data_row.apellidos + ', ' + data_row.nombres + ' fue desactivado con exito!', 'success');
+                                    recargarTabla();
+                                } else {
+                                    imprimirAlerta('Error!', data.message, 'error');
+                                }
+
+                            }
+                        });
                     }
                 });
-            }
-        });
 
-});
-
-$('#tabla_persona tbody').on('click', '.activarPersona', function () {
-
-    var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
-    var json = {
-        codigo: data_row.codigo
-    };
-
-    swal({
-        title: "¿Estás seguro?",
-        text: "¿Desea activar a " + data_row.apellidos + ", " + data_row.nombres + " ?",
-        type: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#EF5350",
-        confirmButtonText: "Si!",
-        cancelButtonText: "No!",
-        closeOnConfirm: false,
-        closeOnCancel: true
-    },
-        function (isConfirm) {
-            if (isConfirm) {
-                $.ajax({
-                    url: '../PersonaServlet?accion=activarPersona',
-                    type: 'POST',
-                    dataType: 'json',
-                    data: {json: JSON.stringify(json)},
-                    beforeSend: function (xhr) {
-                    },
-                    success: function (data, textStatus, jqXHR) {
-                        console.log(data);
-                        var status = data.status;
-                        if (status) {
-                            imprimirAlerta('Activado!', data_row.apellidos + ', ' + data_row.nombres + ' fue activado con exito!', 'success');
-                            recargarTabla();
-                        } else {
-                            imprimirAlerta('Error!', data.message, 'error');
-                        }
+    });
 
+    $('#tabla_persona tbody').on('click', '.activarPersona', function () {
+
+        var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
+        var json = {
+            codigo: data_row.codigo
+        };
+
+        swal({
+            title: "¿Estás seguro?",
+            text: "¿Desea activar a " + data_row.apellidos + ", " + data_row.nombres + " ?",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#EF5350",
+            confirmButtonText: "Si!",
+            cancelButtonText: "No!",
+            closeOnConfirm: false,
+            closeOnCancel: true
+        },
+                function (isConfirm) {
+                    if (isConfirm) {
+                        $.ajax({
+                            url: '../PersonaServlet?accion=activarPersona',
+                            type: 'POST',
+                            dataType: 'json',
+                            data: {json: JSON.stringify(json)},
+                            beforeSend: function (xhr) {
+                            },
+                            success: function (data, textStatus, jqXHR) {
+                                console.log(data);
+                                var status = data.status;
+                                if (status) {
+                                    imprimirAlerta('Activado!', data_row.apellidos + ', ' + data_row.nombres + ' fue activado con exito!', 'success');
+                                    recargarTabla();
+                                } else {
+                                    imprimirAlerta('Error!', data.message, 'error');
+                                }
+
+                            }
+                        });
                     }
                 });
-            }
-        });
-});
+    });
+}
 
 function initInputs() {
 
@@ -409,14 +431,17 @@ function MyValidate() {
     function stripHtml(value) {
         // remove html tags and space chars
         return value.replace(/<.[^<>]*?>/g, ' ').replace(/&nbsp;|&#160;/gi, ' ')
-            // remove numbers and punctuation
-            .replace(/[0-9.(),;:!?%#$'"_+=\/-]*/g, '');
+                // remove numbers and punctuation
+                .replace(/[0-9.(),;:!?%#$'"_+=\/-]*/g, '');
     }
 
     jQuery.validator.addMethod("lettersonly", function (value, element) {
         return this.optional(element) || /^[a-z\s]+$/i.test(value);
     }, "Solo letras.");
 
+
+
+
     jQuery.validator.setDefaults({
         debug: true,
         ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields

web/js/pages/ubigeo.js

+/* 
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+
+$(document).ready(function () {
+
+    init();
+    validarSelect();
+
+});
+
+function init() {
+    listarDepartamento();
+    listarProvincia();
+    listarDistrito();
+}
+
+function listarDepartamento() {
+    $.ajax({
+        type: 'POST',
+        url: '../UbigeoServlet?accion=listarDepartamento',
+        beforeSend: function (xhr) {
+
+        },
+        success: function (data, textStatus, jqXHR) {
+            var status = data.status;
+            var departamentos = data.data.departamentos;
+            if (status) {
+                var select_departamento = '<option value="0">[ SELECCIONE ]</option>';
+                for (var i in departamentos) {
+                    select_departamento += '<option value="' + departamentos[i].codigoDepartamento + '">' + departamentos[i].nombreDepartamento + '</option>';
+                }
+                $('#select_departamento').html(select_departamento);
+                $('#select_departamento').selectpicker('refresh');
+            } else {
+                console.log('no hay data prro');
+            }
+        },
+        complete: function (jqXHR, textStatus) {
+
+        }
+    });
+}
+
+function listarProvincia() {
+    $('#select_departamento').on('change', function () {
+
+        var json = {
+            codigoDepartamento: $('#select_departamento').val()
+        };
+
+        $.ajax({
+            type: 'POST',
+            url: '../UbigeoServlet?accion=listarProvincia',
+            dataType: 'json',
+            data: {json: JSON.stringify(json)},
+            beforeSend: function (xhr) {
+
+            },
+            success: function (data, textStatus, jqXHR) {
+                var status = data.status;
+                var provincias = data.data.provincias;
+                if (status) {
+                    var select_provincia = '<option value="0">[ SELECCIONE ]</option>';
+                    for (var i in provincias) {
+                        select_provincia += '<option value="' + provincias[i].codigoProvincia + '">' + provincias[i].nombreProvincia + '</option>';
+                    }
+                    $('#select_provincia').html(select_provincia);
+                    $('#select_provincia').selectpicker('refresh');
+                } else {
+                    console.log('no hay data prro');
+                }
+            },
+            complete: function (jqXHR, textStatus) {
+
+            }
+        });
+    });
+}
+
+function listarDistrito() {
+    $('#select_provincia').on('change', function () {
+        var json = {
+            codigoDepartamento: $('#select_departamento').val(),
+            codigoProvincia: $('#select_provincia').val()
+        };
+        $.ajax({
+            type: 'POST',
+            url: '../UbigeoServlet?accion=listarDistrito',
+            dataType: 'json',
+            data: {json: JSON.stringify(json)},
+            beforeSend: function (xhr) {
+
+            },
+            success: function (data, textStatus, jqXHR) {
+                var status = data.status;
+                var distritos = data.data.distritos;
+                if (status) {
+                    var select_distrito = '<option value="0">[ SELECCIONE ]</option>';
+                    for (var i in distritos) {
+                        select_distrito += '<option value="' + distritos[i].codigoDistrito + '">' + distritos[i].nombreDistrito + '</option>';
+                    }
+                    $('#select_distrito').html(select_distrito);
+                    $('#select_distrito').selectpicker('refresh');
+                } else {
+                    console.log('no hay data prro');
+                }
+            },
+            complete: function (jqXHR, textStatus) {
+
+            }
+        });
+    });
+}
+
+function validarSelect() {
+
+    $('#select_departamento').on('change', function () {
+//        debugger;
+        var select_departamento = $('#select_departamento').val();
+        if (select_departamento === '0') {
+            $('#select_provincia').html('<option value="0">[ SELECCIONE ]</option>');
+            $('#select_distrito').html('<option value="0">[ SELECCIONE ]</option>');
+
+            $('#select_provincia').selectpicker('refresh');
+            $('#select_distrito').selectpicker('refresh');
+        } else {
+            $('#select_provincia').val(0);
+            $('#select_distrito').val(0);
+            $('#select_distrito').val('<option value="0">[ SELECCIONE ]</option>');
+
+            $('#select_provincia').selectpicker('refresh');
+            $('#select_distrito').selectpicker('refresh');
+        }
+    });
+
+}
\ No newline at end of file

web/vistas/index.jsp

@@ -31,7 +31,7 @@
                             <div class="col-md-4">
                                 <div class="form-group">
                                     <label class="text-uppercase">departamento<span class="text-danger"> (*)</span></label>
-                                    <select class="bootstrap-select" data-width="100%">
+                                    <select id="select_departamento" class="bootstrap-select" data-width="100%">
                                         <option value="0">[ SELECCIONE ]</option>
                                     </select>
                                 </div>
@@ -39,7 +39,7 @@
                             <div class="col-md-4">
                                 <div class="form-group">
                                     <label class="text-uppercase">provincia<span class="text-danger"> (*)</span></label>
-                                    <select class="bootstrap-select" data-width="100%">
+                                    <select id="select_provincia" class="bootstrap-select" data-width="100%">
                                         <option value="0">[ SELECCIONE ]</option>
                                     </select>
                                 </div>
@@ -47,7 +47,7 @@
                             <div class="col-md-4">
                                 <div class="form-group">
                                     <label class="text-uppercase">distrito<span class="text-danger"> (*)</span></label>
-                                    <select class="bootstrap-select" data-width="100%">
+                                    <select id="select_distrito" class="bootstrap-select" data-width="100%">
                                         <option value="0">[ SELECCIONE ]</option>
                                     </select>
                                 </div>
@@ -75,6 +75,7 @@
         <script type="text/javascript" src="../plantilla/assets/js/pages/form_bootstrap_select.js"></script>
         <!--js-->
 
+        <script src="../js/pages/ubigeo.js" type="text/javascript"></script>
     </body>
 </html>