Laravel 使用VUEJS的JQUERY-DATATABLES

我在vuejs中使用jquery数据表。一切似乎都很好，但当我尝试获取500多条记录时，它会显示所有记录，过滤器不工作，文本“表中无可用数据”显示在表的顶部，然后显示所有记录。任何帮助都将不胜感激

代码如下：

产品
#
名称
类别
价格
量
行动
{{product.id}
{{product.name}
{{product.category}
{{产品.价格|货币}
{{product.quantity}
导出默认值{
数据（）{
返回{
tableData:[]，
添加产品：false，
编辑：假
}
},
创建（）{
this.initDatatable（）；
这个.getProducts（）；
},
方法：{
getProducts（）{
axios.get（‘产品’）
.然后（res=>this.tableData=res.data）
.catch（错误=>异常.handle（错误））
},
删除产品（id）{
delete（`products/${id}`）
。然后（res=>{
for（设i=0；iconsole.log（error.response））
},
initDatatable（）{
$（'.walla'）.DataTable({
“pagingType”：“完整编号”，
“长度菜单”：[
[10, 25, 50, -1],
[10,25,50，“全部”]
],
订单：[[0，'asc']，[3，'desc']，
回答：是的，
摧毁：没错，
检索：对，
自动填充：对，
colReorder：是的，
});
},
编辑模式（产品）{
此.$store.dispatch（'updateProduct'，product）
.然后（（）=>{
this.editing=true；
this.add_product=true；
})
}
},
}

试试这个

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

名称
....
...
导出默认值{
数据（）{
返回{
职位：{}，
}
},
方法：{
mydatatables（）{
$（函数（）{
$（'#datatables'）。DataTable({
“pagingType”：“完整编号”，
“长度菜单”：[
[10, 25, 50, -1],
[10,25,50，“全部”]
],
订单：[[0，'asc']，[3，'desc']，
回答：是的，
摧毁：没错，
检索：对，
自动填充：对，
colReorder：是的，
});
});
},
},
创建（）{
get（“/api/posts”）。然后（响应=>{
this.posts=response.data.data；
这是.mydatatables（）；
});
}
}

产品
#
名称
类别
价格
量
行动
{{product.id}
{{product.name}
{{product.category}
{{产品.价格|货币}
{{product.quantity}
导出默认值{
数据（）{
返回{
tableData:[]，
添加产品：false，
编辑：假
}
},
创建（）{
这个.getProducts（）；
},
This solution worked for me.Even for 10,000 records.It works perfectly.