JQUERY-DATATABLES WITH VUEJS

Question

I am using jquery-datatables with vuejs. Everything seems to work well but when I try to fetch more than 500 records, it gets all the records displayed with filters not working and the text "No data available in table" being shown at the top of the table followed by all records displayed.Any help will be appreciated.

Here is the code:

<template>
    <div>
        <div class="content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Products</h4>

                        </div>
                        <div class="card-body">
                            <table class="table table-striped walla">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="product in tableData" :key="product.id">
                                    <td>{{product.id}}</td>
                                    <td>{{product.name}}</td>
                                    <td>{{product.category}}</td>
                                    <td>{{product.price | currency}}</td>
                                    <td>{{product.quantity}}</td>
                                    <td>
                                        <button class="btn btn-success btn-sm" @click="editMode(product)"><i
                                            class="fa fa-edit"></i></button>
                                        <button class="btn btn-danger btn-sm" @click="deleteProduct(product.id)"><i
                                            class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [],
                add_product: false,
                editing: false
            }
        },
        created() {
            this.initDatatable();
            this.getProducts();

        },

        methods: {
            getProducts() {
                axios.get('products')
                    .then(res => this.tableData = res.data)
                    .catch(error => Exception.handle(error))
            },


            deleteProduct(id) {
                axios.delete(`products/${id}`)
                    .then(res => {
                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].id == res.data) {
                                this.tableData.splice(i, 1);
                            }
                        }
                    })
                    .catch(error => console.log(error.response))
            },
            initDatatable() {
                $('.walla').DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    order: [[0, 'asc'], [3, 'desc']],
                    responsive: true,
                    destroy: true,
                    retrieve: true,
                    autoFill: true,
                    colReorder: true,

                });
            },

            editMode(product) {
                this.$store.dispatch('updateProduct', product)
                    .then(() => {
                        this.editing = true;
                        this.add_product = true;
                    })
            }
        },

    }
</script>

Answer 1

This solution worked for me.Even for 10,000 records.It works perfectly.

<template>
    <div>
        <div class="content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Products</h4>

                        </div>
                        <div class="card-body">
                            <table class="table table-striped walla">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="product in tableData" :key="product.id">
                                    <td>{{product.id}}</td>
                                    <td>{{product.name}}</td>
                                    <td>{{product.category}}</td>
                                    <td>{{product.price | currency}}</td>
                                    <td>{{product.quantity}}</td>
                                    <td>
                                        <button class="btn btn-success btn-sm" @click="editMode(product)"><i
                                            class="fa fa-edit"></i></button>
                                        <button class="btn btn-danger btn-sm" @click="deleteProduct(product.id)"><i
                                            class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [],
                add_product: false,
                editing: false
            }
        },
        created() {
          this.getProducts();
        },


        methods: {
            getProducts() {
                axios.get('products')
                    .then(res => {
                      this.tableData = res.data
                      this.initDatatable();
                    )
                    .catch(error => Exception.handle(error))
            },


            deleteProduct(id) {
                axios.delete(`products/${id}`)
                    .then(res => {
                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].id == res.data) {
                                this.tableData.splice(i, 1);
                            }
                        }
                    })
                    .catch(error => console.log(error.response))
            },
            initDatatable() {
                setTimeout(() => {
                $('.walla').DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    order: [[0, 'asc'], [3, 'desc']],
                    responsive: true,
                    destroy: true,
                    retrieve: true,
                    autoFill: true,
                    colReorder: true,

                });
               }, 300)
            },

            editMode(product) {
                this.$store.dispatch('updateProduct', product)
                    .then(() => {
                        this.editing = true;
                        this.add_product = true;
                    })
            }
        },

    }
</script>

Answer 2

try this

<template>
 <div>
     <table id="datatables" >
        <thead>
     <tr>
     <th><b>Name</b></th>
     ....
     </tr>
     </thead>
    <tr v-for="item in posts" :key="item.id">
    ...
    </tr>
     </table>

 </div>
 </template>

<script>
export default {
    data() {
        return {
            posts:{},
        }
    },
    methods: {
        mydatatables(){
            $( function () {
                $('#datatables').DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    order: [[ 0, 'asc' ], [ 3, 'desc' ]],
                    responsive: true,
                    destroy: true,
                    retrieve:true,
                    autoFill: true,
                    colReorder: true,

                });
            });
        },
    },
    created() {
      axios.get("/api/posts").then(response => {
                this.posts= response.data.data;
                this.mydatatables();
            });
    }
}