using Jquery datatable in vue js

Question

I am trying to play around with jquery datatable in vue js , however when I change 'Show entries' or enter something in 'Search' no records are displayed Any hint of what am I doing wrong ( I'm not very experienced with Vue Js ) will be highly appreciated Below the code (got it from an example, it seems to load the data in the table ok) :

 template>
  <div class="Example">
      <h2>Implement jQuery DataTable in Vue Js</h2>
      <table class="display table-bordered nowrap" cellspacing="0" width="100%" id="datatable">
        <thead>
          <tr>
            <th>ID</th>
            <th>Product Title</th>
            <th>Product Price</th>
            <th>Created On</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in products" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.product_title}}</td>
            <td>{{item.product_price}}</td>
            <td>{{item.created_at}}</td>
          </tr>
          
        </tbody>
      </table>    
  </div>
</template>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 
<script>
import 'jquery/dist/jquery.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'datatables.net-dt/js/dataTables.dataTables'
import 'datatables.net-dt/css/jquery.dataTables.min.css'
import axios from 'axios';
import $ from 'jquery';
export default {
  mounted(){
    axios
    .get("https://www.testjsonapi.com/products/")
    .then((response)=>
    {
      this.products = response.data;
        $('#datatable').DataTable();
    })
  },
  data: function() {
        return {
            products:[]
        }
    },  
}
</script>

svarog · Accepted Answer · 2022-03-10 08:52:44Z

0

I just stumble upon this post:

Vuejs and datatables: table empty when using v-for to fill data

...which answers it

...you can call table.destroy() to destroy the current instance before reinitializing it. The key is to delay the reinitialization until $nextTick() so that Vue can flush the DOM of the old DataTables

I left the answer here to whom it may concern.

watch: {
  products(val) {
    $('#datatable').DataTable().destroy();
    this.$nextTick(()=> {
      $('#datatable').DataTable()
    });
  }
}

edited Mar 10, 2022 at 8:52

svarog

9,8755 gold badges66 silver badges79 bronze badges

answered Aug 10, 2021 at 10:11

DariusNica

5736 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

using Jquery datatable in vue js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related