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>

Vincent Kituyi · Accepted Answer · 2019-11-15 07:13:05Z

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>

bokino12 · Accepted Answer · 2019-09-09 12:42:39Z

0

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();
            });
    }
}

answered Sep 9, 2019 at 12:42

bokino12

3495 silver badges13 bronze badges

6 Comments

Vincent Kituyi Over a year ago

Thank you for the response.It works with at most 500 records but it does not work with 1000 records

Vincent Kituyi Over a year ago

Anyone who can help on this please?

bokino12 Over a year ago

try this code getProducts() { axios.get('products').then(res => {this.tableData = res.data.data;this.initDatatable(); }))

Vincent Kituyi Over a year ago

Thank you for the response but the output is still the same.

bokino12 Over a year ago

try add <table id="walla" class="table table-striped"> </table>

|

Collectives™ on Stack Overflow

JQUERY-DATATABLES WITH VUEJS

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related