data is not displaying in data table

Can you guys help me with this error i cant display my data. The error is DataTables warning: table id=DataTables_Table_0 - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see https://datatables.net/tn/4 here is the template for the datatable

<div class="row">
        <div class="col-lg-12">
          <div class="card p-3">
            <div class="row mb-3">
              <div class="col-6">
                <button class="btn btn-primary" @click="createFacility">Create New</button>
              </div>
            </div>
            <DataTable :data="facilities" class="display">
              <thead>
                  <tr>
                      <th>Id</th>
                      <th>Title</th>
                      <th>Category</th>
                  </tr>
              </thead>
              <tbody>
                <tr v-for="facility in this.facilities" :key="facility.id">
                  <td>{{ facility.id }}</td>
                  <td>{{ facility.title }}</td>
                  <td>{{ facility.category }}</td>
                </tr>
              </tbody>
          </DataTable>
          </div>
        </div>
      </div>

here is the script

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Swal from 'sweetalert2';

DataTable.use(DataTablesCore);

export default {
  components: {
    DataTable
  },
  data() {
    return {
      facilities: [],
      dataTableOptions: {
        order: [
          [0, 'desc']
        ]
      },
      base_url: 'http://localhost:5173/dashboard'
    };
  },
  mounted() {
    this.getFacilities();
  },
  methods:{
    getFacilities() {
      axios.get('http://127.0.0.1:8000/api/facility').then(
        response => {
          this.facilities = response.data;
        }
      )
      .catch(error => {
        console.log(error);
      });
    }
  }
};

tykus

2 years ago

Best Answer

Level 104

You appear not to be using the Datatable component correctly - you should only be defining a header and/or footer

Do not use a Vue for statement to populate the table with data unless the data is static (i.e. not reactive). Doing so would cause both DataTables and Vue to try and control the same DOM elements, resulting in unpredictable behaviour. Bind data using the data parameter!

https://datatables.net/blog/2022/vue

plue

2 years ago

Level 1

@tykus i tried this earlier, and i render a button but i cant call the function there.

columns: [
        {data: 'id'},
        {data: 'title'},
        {data: 'category'},
        {
          data: null,
          render: function (data, type, row) {
            return `
                   <button class="btn btn-outline-warning" @click="viewFacility(${data.id})">View</button>
                   <button class="btn btn-outline-success" @click="editFacility(${data.id})">Edit</button>
                   <button class="btn btn-outline-danger" @click="deleteFacility(${data.id})">Delete</button>
                   `;
          }
        }
      ]

this is the method

viewFacility(id) {
      Swal.fire({
        title: 'Facilities: View Facility',
        html: `<h1>This is View</h1>`,
        showCancelButton: true,
        cancelButtonText: 'Close'
      });
    },

tykus

2 years ago

Level 104

@plue can you describe what you're trying to achieve rather than how ?

plue

2 years ago

Level 1

@tykus well this question may be off topic to the title of my post but here it is, i also tried using the datatable component correctly as you mention and it display my data in datatable, i also added buttons and what i want to achieve is when the button is click a modal will popup but the problem is the modal is not showing, i also add a console.log to the function but it is not appearing. So i thought the @click is not working inside the render in datatable

Please or to participate in this conversation.