Answers

• allan Posts: 63,516Questions: 1Answers: 10,472 Site admin

  April 2021

  I don't see how you are actually populating the table's data from the above? There isn't much for us to go on there. Can you please link to a test case as required in the forum rules.

  Allan
• UsmanBasharmal Posts: 14Questions: 3Answers: 0

  April 2021 edited April 2021

  Thanks for the prompt response, the data is properly displayed in the datatable I have only one problem I want to refresh the table after the new data is inserted without refreshing the page

  I have tired clear(),draw(),destroy(), table.ajax.reload() but non of them works I think the problem is that I am getting the data via axios in vuejs

   <table class="table table-hover table-bordered dataTable no-footer "
                                                          id="sampleTable">
                                                          <thead>
                                                              <tr>
                                                                  <th>
                                                                      id
                                                                  </th>
                                                                  <th>
                                                                      name
                                                                  </th>
                                                                  <th>
                                                                      Email
                                                                  </th>
                                                                  <th>
                                                                      status
                                                                  </th>
                                                                  <th>
                                                                      Modify
                                                                  </th>
                                                              </tr>
                                                          </thead>
                                                          <tbody>
                                                              <tr role="row" class="odd" v-for="user in users"
                                                                  :key="user.id">
                                                                  <td class="sorting_1">{{ user.id }}</td>
                                                                  <td>{{user.name|ucfirst}}</td>
                                                                  <td>{{user.email}}</td>
                                                                  <td>{{user.status}}</td>
  
                                                                  <td style="margin:auto;">
                                                                      <a href="#"><i class="fa fa-edit blue"></i></a>|
                                                                      <a href="#"><i class="fa fa-trash red"></i></a>
                                                                  </td>
  
                                                              </tr>
  
                                                          </tbody>
                                                      </table>
  
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  April 2021 Answer ✓

  table.ajax.reload()

  This will only work if you are using ajax to load the table.

  I'm not familiar with VUE but if the new data is using the for loop in the tbody then I would try using destroy() before you fetch the new data then reinitialize the Datatable after it has been loaded into the table.

  Kevin
• UsmanBasharmal Posts: 14Questions: 3Answers: 0

  April 2021

  I have tired this $('#sampleTable').DataTable().destroy(); $('#sampleTable').DataTable(); but no result
• UsmanBasharmal Posts: 14Questions: 3Answers: 0

  April 2021

  I found the solution I destroy the datable in the create function $('#sampleTable').DataTable().destroy(); and then create it

  table() {
              this.$nextTick(() => {
                  $('#sampleTable').DataTable();
              })
          },
  
  
  and call it in 
  
  

    created() {        
      Fire.$on("refreshPage", () => {
      this.get();
      });}
  

  and then call the Fire.$emit("refreshPage");

  in create function

      create() {
                          // this.validation();
          this.form.post('api/user').then(() => {
                  $("#addnew").modal("hide");
                  toast.fire({
                      icon: "success",
                      type: "success",
                      title: "Information Created Successfully!"
                  });
                  $('#sampleTable').DataTable().destroy();
                   Fire.$emit("refreshPage");
  
                  this.form.reset();
  
  
              })
              .catch(er => {
                  console.log(er);
              });
  
  
  
      },
  

  ```
• allan Posts: 63,516Questions: 1Answers: 10,472 Site admin

  April 2021

  Thanks for the extra information. DataTables doesn't have any Vue bindings built-in (a plug-in for that is something I'm interested in doing in future), so if Vue updates the table's DOM, DataTables has no idea that has happened.

  Thus you need to either:

  1. Recreate the table as you have done, or
  2. Don't use Vue to render the table's content - get DataTables to do it.

  Basically, two libraries trying to control the same DOM elements == bad things will happen .

  Allan