How to reload dataTables from VueJS after adding or editing?

Question

I'd like to know how I can use this same approach when loading data from database through an api. In the first time the dataTables loads fine. However, when I add a new record, then I need to load my dataTables again with the new record. Here's my html code:

<table class="table table-striped table-bordered table-hover" id="dataTables-eventos">
    <thead>
        <tr class="tbheader">
            <th class="text-center">#</th>
            <th>Nome do Evento</th>
            <th class="text-center">Editar</th>
            <th class="text-center">Deletar</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="ev in eventos" :key="ev.id" track-by="id">
            <td class="text-center">{{ ev.id }}</td>
            <td>{{ ev.name }}</td>
            <td class="text-center"><a class="cursorpointer" v-on:click="showMessage()"><span class="glyphicon glyphicon-edit"></span></a></td>
            <td class="text-center"><span class="glyphicon glyphicon-trash"></span></td>
        </tr>
    </tbody>
</table>

And here's my VueJS code:

mounted() {
  this.getEventos();
},

methods: {
    getEventos() {
        axios.get('/api/eventos')
             .then((response) => {
                this.eventos = response.data})
             .then((response) => {
                $('#dataTables-eventos').DataTable({
                    responsive: true,
                    "aaSorting": [[ 1, "asc" ]],
                    "aoColumnDefs": [
                        { "bSortable" : false, "aTargets": [0,2,3] },
                        { "searchable": false, "aTargets": [2,3] }
                    ],
                    language: {
                        url: '/js/dataTables/localization/pt_BR.json'
                    }
                });
             });
},

addNewRecord() {

    axios.post('/api/eventos', { nomeEvento: this.nomeEvento });

}

So after adding (or editing) a new record on my DB how can I reload my dataTables so I can see the changes?

Hi @RoyJ, thanks for your response, however your approach dos not work. The dataTables is already created so I cannot call this.getEventos() again. — user1818765
– user1818765, Commented May 17, 2017 at 21:07
Sorry but stackoverflow does not allow me to add the whole vue code. — user1818765
– user1818765, Commented May 17, 2017 at 21:16
Maybe this would help? github.com/njleonzhang/vue-data-tables — Roy J
– Roy J, Commented May 17, 2017 at 21:17

AnotherDev · Accepted Answer · 2018-09-14 14:35:27Z

3

I just ran into a situation where I needed to use vue.js with datatables.net and had to use customized table html. I created a component that allowed me to format the table as I needed using template/v-for and refresh the datatable while preserving datatables.net functionality. I hope this helps someone down the road...

export default {
    data() {
        return {
            dataTable: null
        }
    },
    props: {
        data: Array
    },
    watch: {
        data() {
            if (this.dataTable) {
                this.dataTable.destroy();
            }

            this.$nextTick(() => {
                this.dataTable = $("#table").DataTable({
                    language: {
                        emptyTable: "No Results Found"
                    }
                });
            });
        }
    }
}

answered Sep 14, 2018 at 14:35

AnotherDev

1231 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

artem0071 · Accepted Answer · 2017-05-16 21:13:01Z

0

You can do it without reloading all the data. Just add this.nomeEvento to array eventos after posting to server.

answered May 16, 2017 at 21:13

artem0071

2,4293 gold badges16 silver badges25 bronze badges

8 Comments

user1818765 Over a year ago

Hi, I think that's a good idea, however in this case I also need to return the new Event ID as I'm using the ID on my dataTables. Do you know how I can get the last ID from DB using Laravel? Thanks a lot.

user1818765 Over a year ago

Hey, I managed to get the last inserted id, however here's what happened when I added the new event to my array.

user1818765 Over a year ago

Hey, I managed to get the last inserted id and added the new event to my array. this.eventos.push({ id: response.data.evento_id, name: this.nomeEvento }); It does show the the new event on my dataTables, but it doesn't go into the right position (my dataTables is initially sorted by event name). Also, if initially I have, let's say 20 records on my dataTables it shows at the table's footer the following: Showing 1 to 10 of 20 records. And now when I add a new record it does not actually updates the dataTables. I have to refresh my screen.

artem0071 Over a year ago

"this.eventos.push" add your item in last position. If you want, you can sort out your array as you want after uploading to the server

user1818765 Over a year ago

Well, I tried sorting the table, but it didn't work. As I said, when I add a new row it seems that dataTables doesn't recognize it. That's why initially I asked how to reload the dataTables. Remember I'm using jQuery dataTables and not my own table array! I have tried different commands such as: $('#ev').DataTable().push({ "id": response.data.evento_id, "name": this.nomeEvento }); $('#ev').DataTable().clear(); $('#ev').DataTable().destroy(); $('#ev').DataTable().draw(false); And none of them seems to work.

|

Collectives™ on Stack Overflow

How to reload dataTables from VueJS after adding or editing?

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related