0

Estoy desarrollando un spa en vuejs y para mostrar los datos utilizo dataTables, tengo los botones de crear un nuevo registro, editar y ver la información y estoy realizando uso de modales, pero estoy presentando problemas en el modo responsive en dispositivos móviles no se me visualizan los datos y a la hora de abrir el modal de editar no me abre tampoco, solo abre el modal de crear.

Template:

<template>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-auto mr-auto">
                            <h2 class="text-secondary">Lista de Usuarios</h2>
                        </div>
                        <div class="col-auto">
                            <button class="right btn btn-primary btn-sm" v-b-modal.modal-1 @click="showModal = true">Agregar</button>
                        </div>
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="tblUser" class="table table-bordered table-hover dt-responsive">
                        <thead>
                            <tr>
                                <th>Usuario</th>
                                <th>Nombre</th>
                                <th>Email</th>
                                <th>Perfil</th>
                                <th>Estado</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(user, index) in users" :key="index">
                                <td>{{ user.username }}</td>
                                <td>{{ user.name }}</td>
                                <td>{{ user.email }}</td>
                                <td>{{ user.profile }}</td>
                                <td class="activate" v-if="user.deleted_at == null">Activado</td>
                                <td class="desactivate" v-else>Desactivado</td>
                                <td>
                                    <button class="btn btn-info btn-sm">Detalle</button>
                                    <button class="btn btn-warning btn-sm" v-b-modal.editUser @click="editUser(user)" >Editar</button>                                        
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

<!-- Modal Para Agregar Usuarios -->
<AddUser ref="userModal" @reload="getUsers"></AddUser>

<!-- Modal Para Editar Usuarios -->
<EditUser ref="editModal" :editUser="this.dataEditUser" :statusUser="this.status" @reload="getUsers"></EditUser>

</div>

Script:

<script>

// Services
import * as userService from '../../services/user';
// Components
import AddUser from '../../components/Admin/AddUser.vue';
import EditUser from '../../components/Admin/EditUser.vue';
export default {
    data() {
        return {
            users: [],
            dataEditUser: {},
            status: ''
        }
    },
    mounted() {            
        this.getUsers();
    },
    components: {
        AddUser,
        EditUser
    },
    methods: {
        dataTable() {
            this.$nextTick(() => {
                $('#tblUser').DataTable({
                    "ordering": false,
                    // "columnDefs": [
                    //     { "width": "5%", "targets": 3 }
                    // ],
                    language: {
                        "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"
                        }
                    },
                });
            });
        },
        
        getUsers: async function() {
            try {
               
                const response = await userService.getUsers();                               
                if(response.status == 200) {
                    this.users = response.data.data;
                    this.reloadTable();                            
                }
            } catch (error) {
                 console.log(error);
                if (error.response.status == 422){
                    console.log(error);
                }
            }
        }, 
        editUser(user) {
            this.dataEditUser = user;
            if (user.deleted_at == null) {
                this.status = 'Activado';
            }else {
                this.status = 'Desactivado';
            }
        },
            reloadTable() {
            $('#tblUser').DataTable().destroy();               
            this.dataTable();
        },
        makeToast(title, text, type) {                
            this.$bvToast.toast(text, {
                title: title,
                variant: type,
                autoHideDelay: 4000,
                appendToast: true,
                solid: true
            })
        },
        
    }
}

Librerias que tengo para dataTable:

    //Bootstrap
require('./bootstrap');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';

//DataTables
import 'datatables.net-bs4';
import 'datatables.net/js/jquery.dataTables.min.js';
import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css';
import 'datatables.net-bs4/js/dataTables.bootstrap4.min.js';
import 'datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css';
import 'datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js';

//Rutas
import router from './routes';

Vue.use(BootstrapVue);

const app = new Vue({
 el: '#app',
 store,
 router,
});

Imagen en dispositivo móvil introducir la descripción de la imagen aquí

He intentado cambiar de versión de dataTables y agregando la clase dt-responsive a la tabla pero no se me visualizan los datos en mobile.

Gracias

14
  • 1
    ouch.. jquery mezclado con vue.. es un no no... vue usa un dom virtual.. que no se lleva nada pero nada bien con jquery.. vendra por ahi tu problema??? Igual veo que usas bootstrap.. hay algo de la tabla de bootstrap que no te alcance?????
    – gbianchi
    Commented el 21 ago. 2021 a las 3:26
  • Ok, no sabia esa parte, ya la corregí pero aún así no se me visualizan los datos, las columnas no se adaptan correctamente en modo responsive Commented el 22 ago. 2021 a las 18:42
  • de cuales columnas hablas? como es el css? podrias mostar un ejemplo del problema? en este caso si valen imagenes...
    – gbianchi
    Commented el 23 ago. 2021 a las 3:27
  • Listo, edite la pregunta y agregue una imagen de como se ve en dispositivos móviles la tabla, gracias Commented el 24 ago. 2021 a las 13:36
  • Porque estas eliminando un objeto de la pantalla y volviendolo a crear? deja esa tarea a vue.. puede ser por eso que no ves datos? NO TOQUES EL DOM...
    – gbianchi
    Commented el 24 ago. 2021 a las 14:18

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.