Vuejs jquery 数据表直接插件无法正常工作

Posted 2023-02-22

【中文标题】Vuejs jquery 数据表直接插件无法正常工作

【英文标题】：Vuejs jquery datatable direct plugin not working well

【发布时间】：2020-05-18 00:46:17

【问题描述】：

我已经使用npm i dataTables --save 安装了dataTables，现在我可以在我的vue 组件中看到dataTable 格式，问题是搜索栏，分页不能正常工作。看我的截图

我的组件中的代码

<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>

方法

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


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

【参考方案1】：

实例化数据表后，不能通过更新 dom 来更新其中的数据。您需要使用数据表 API 来触发使用最新数据的刷新。

在 mounted 挂钩中，实例化 dataTables 并存储引用。

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

之后，clear & update axios 返回后的数据。

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

您需要稍微调整一下，确保您的数据表配置为正确显示数据。

---

或者，在获取数据后，您可以销毁数据表对象并重新实例化它，但在读取样式之前您可能会遇到内容的闪现。

【讨论】：

我没有注意到先生，我在初始化数据表之前正在填写表格。谢谢你

【参考方案2】：

尝试只将$('#myTable').DataTable(); 放入挂载的钩子中，如下所示

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

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

【讨论】：

先生，我得到了相同的输出。为什么会这样？

我认为您缺少添加数据表 css 文件

有人想通了。谢谢老大的回答！