Vuejs jquery datatable direct plugin not working well

Question

I already installed dataTables using npm i dataTables --save, and now I can see the dataTable format in my vue component, the problem is the searchbar,paginations are not working well. See my screenshot

code in my component

<table class="table table-hover" id="myTable">
  <thead>
    <tr>
      <th>Room Name</th>
      <th>Building</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="room in roomsData" :key="room.id">
      <td>{{room.room_desc}}</td>
      <td>{{room.bldg}}</td>
      <td>
        <a href="#"  data-toggle="modal" data-target="#exampleModal" @click="editModal(room)">
          <i class="fa fa-edit"></i>
        </a>
        <a href="#" @click="deleteRoom(room.id)">
          <i class="fa fa-trash text-red"></i>
        </a>
      </td>
    </tr>
  </tbody>
</table>

Methods

myTable(){
    $(document).ready( function () {
        $('#myTable').DataTable();
    });
}

getRoomsDataTable(){
  axios.get('/getRoomsDatatable')
    .then((res) => {
        this.roomsData = res.data
    }) .catch((e) => {
        console.log(e)
    })
},

Trenton Trama · Accepted Answer · 2020-02-01 17:57:27Z

2

After you've instantiated data-tables, you can't update the data in it by updating the dom. You'll need to use the datatable api to trigger a refresh using the latest data.

In a mounted hook, instantiate dataTables and store the reference.

{
    ...
    data() { 
        return {
            dtRef: null
        } 
    },
    mounted() {
        this.dtRef = $('#myTable').DataTable();
    }
}

After that, clear & update the data once axios returns.

axios.get('/getRoomsDatatable')
    .then((res) => {
        this.roomsData = res.data
        datatable.clear();
        datatable.rows.add(res.data);
        datatable.draw();
    })

You'll need to fiddle with this a little bit, making sure your datatable is configured to correctly display the data.

Alternately, after the data has been fetched, you can destroy the datatable object and re-instantiate it, but you may experience a flash of content before the styling is readded.

answered Feb 1, 2020 at 17:57

Trenton Trama

4,9301 gold badge25 silver badges27 bronze badges

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

1 Comment

draw134 Over a year ago

I didint notice that sir that I was filling the table before datatable was initialized. Thanks for this

Boussadjra Brahim · Accepted Answer · 2020-02-01 17:24:18Z

2

Try to put only $('#myTable').DataTable(); inside the mounted hook as follows

methods:{
 getRoomsDataTable(){
           axios.get('/getRoomsDatatable')
                            .then((res) => {
                                this.roomsData = res.data
                            })
                            .catch((e) => {
                                console.log(e)
                            })
      },
},

mounted(){
 $('#myTable').DataTable();
}

answered Feb 1, 2020 at 17:24

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

3 Comments

draw134 Over a year ago

I get the same output sir. why is this happening?

Boussadjra Brahim Over a year ago

i think you're missing to add the datatables css file

draw134 Over a year ago

someone figured it out. Thanks for the answer sir!

Collectives™ on Stack Overflow

Vuejs jquery datatable direct plugin not working well

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related