Skip to main content
se añadieron 102 caracteres en el cuerpo
Origen Enlace
<script>
// Jquery
import $ from 'jquery';
// 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
            })
        },
        
    }
}

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

<script>
// Jquery
import $ from 'jquery';
// 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
            })
        },
        
    }
}
<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
            })
        },
        
    }
}

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

Origen Enlace

No se visualizan los datos en datatable vuejs

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>
// Jquery
import $ from 'jquery';
// 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,
});

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