I'm facing a challenge in re-initializing a DataTable within my Vue.js application after updating the data. Below is the snippet of code I am using:
- template :
.
<table ref="tableUtamaAlamat" id="tableUtamaAlamat" class="display datatable-custom" style="width: 100%">
<thead>
<tr>
<th>No</th>
<th>address</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableDataUtamaAlamat" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ row.alamat }}</td>
</tr>
</tbody>
</table>
- script part (methods):
initDataTableAlamat() {
$(this.$refs.tableUtamaAlamat).DataTable({
paging: true,
searching: true,
ordering: false,
info: true,
dom: '<"top-toolbar"fB>rt<"bottom-toolbar"ip><"clear">',
buttons: [
{
text: '...Svg path for a button...',
action: function (e, dt, node, config) {
$("#modalUtamaAlamat").removeClass("hidden");
},
},
],
language: {
search: "Pencarian:",
lengthMenu: "Tampilkan _MENU_ entri",
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
infoEmpty: "Tidak ada entri tersedia",
infoFiltered: "(difilter dari _MAX_ total entri)",
zeroRecords: "Tidak ada entri yang cocok ditemukan",
paginate: {
next: "",
previous: "",
},
},
initComplete: function () {
$(".wrapper-datatable-custom .top-toolbar .dt-search .dt-input").attr("placeholder", "Pilih salah satu...");
},
});
},
async getAlamatByUserID() {
try {
const payload = { user_id: this.$store.state.auth.user.user.user_id };
const response = await this.$store.dispatch("vendor/getAlamatByUserID", payload);
this.tableDataUtamaAlamat = response.data.data;
// Re-initialize DataTable
this.$nextTick(() => {
const table = $(this.$refs.tableUtamaAlamat).DataTable();
if (table) {
table.destroy(); // Destroy the existing DataTable instance
}
this.initDataTableAlamat(); // Re-initialize DataTable
});
} catch (error) {
console.error("Error fetching alamat:", error);
}
},
async deleteAlamat(alamat_id){
try {
const payload = { alamat_id : alamat_id};
const response = await this.$store.dispatch('vendor/deleteAlamat', payload);
console.log(response)
await this.getAlamatByUserID();
return response;
} catch (error) {
console.error('Error saving alamat:', error);
return error;
}
}
explain :
Therefore, the objective is to re-initialize the datatable when the deleteAlamat action is triggered. Upon calling this function, getAlamatByUserID is executed to update the data stored in
this.tableDataUtamaAlamat. Subsequently, even though the updated data is logged, the issue lies with the datatable not rendering properly. The row count persists, and a page refresh is required to reflect the changes in UI.The setback seems to be related to the asynchronous behavior of async/await. When utilizing hardcoded data, the re-initialization process completes successfully. Any suggestions or insights would be greatly appreciated.
any suggesttion? thank you in advance
EDIT : I forgot to mention error, becaouse there is no error when re-initializing part
EDIT : Ayyone? i think the issue is related to async/await timing. because, when I fetch the data with harcoded data the re-initializing is succeed.