[Vuejs]-Ajax Reload on Vue.js DataTables

by

1👍

✅

Maybe it’ll help you!

You tried to get a table element using Jquery, but it’s not Vue’s way to get a component.

I noticed you use the Vue’s ref attribute for the DataTable component, so use that to get the component, like this-

methods: {
  changeIt() {
    const componentTable = this.$refs.table;
    componentTable.ajax.url('users/user').load();
  }
},

Also, see this- Template refs documentation

👤Aleksandr Savkin

0👍

DataTables requires jQuery. Don’t select either version if you already have it.

So, verify if you are-

  1. Failing to contain the DataTables library.
  2. Loading the DataTables library before the jQuery library.
  3. Loading the jQuery library double.
  4. Selecting the wrong route to the jQuery files.

For instance, in your HTML file at the head section, verify those-

   <!--  Load CSS file for DataTables  -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
      integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <!--  load jQuery  -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!--  load DataTables  -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
      integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

For more information, refer this documentation- https://bobbyhadz.com/blog/jquery-datatable-is-not-a-function

👤Neha Soni

Leave a comment