How can I use url parameters with ajax to make an API call in datatables.net-vue3

5k3ptic

I have a working datatable that I'm trying to move over to utilize the vue3 component. The only issue I'm hanging up on is how to provide the url and parameters to ajax.

The currently working example uses the ajax as follows:

export default {
  mounted() {
    var table = $("#svcTable").DataTable({
      ajax: {
        url: "http://localhost:5050/api/v1/services2",
        data: this.$route.query,
      },
      columns: [
        {
          className: "dt-control",
          orderable: false,
          data: null,
          defaultContent: "",
        },
        { data: "ipaddr" },
        { data: "hostname" },
        { data: "port" },
      ],
      serverside: true,
      ordering: false,
      dom: "Bfrtip",
      buttons: ["csv", "colvis"],
      pageLength: 100,
      columnDefs: [
        {
          targets: [8, 12, 13, 14, 15, 16],
          visible: false,
        },
        {
          className: "control",
          orderable: false,
          targets: 0,
        },
      ],
      scrollX: true,
      responsive: {
        details: {
          type: "column",
          target: "tr",
        },
      },
    });

the url and query are provided separately and the parameters are pulled from the current url string.

the ajax request works when hard coded as follows:

<DataTable
      class="display"
      :columns="columns"
      ajax="http://localhost:5050/api/v1/services2?port=8080&ipaddr=10.1.1.4"}'
      :options="{ select: true }"
      ref="table"
      width="100%"
    >

but any attempts to split the url and query params fails miserably.

side-note: the currently working instance is using server-side functionality but I plan to try scroller to see if I can avoid the server side componentry

5k3ptic

This seems to accomplish the goal. Please let me know if theres an easier way.

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

import DataTable from "datatables.net-vue3";
import DataTablesLib from "datatables.net";
import "datatables.net-select";

DataTable.use(DataTablesLib);

const route = useRoute();
console.log(route.query);

let counter = 0;
let dt;

const data = ref([]);
const table = ref();
const ajax = {
  url: "http://localhost:5050/api/v1/services2",
  data: route.query,
};
const columns = [
  {
    className: "dt-control",
    orderable: false,
    data: null,
    defaultContent: "",
  },
  { data: "ipaddr" },
  { data: "hostname" },
  { data: "port" },
];

// Get a DataTables API reference
onMounted(function () {
  dt = table.value.dt();
});
</script>

<template>
  <v-container>
    <DataTable
      class="display"
      :columns="columns"
      :ajax="ajax"
      :options="{ select: true }"
      ref="table"
      width="100%"
    >
      <thead>
        <tr>
          <th></th>
          <th>IP Address</th>
          <th>Hostname</th>
          <th>Port</th>
        </tr>
      </thead>
    </DataTable>
  </v-container>
</template>

<style>
@import "datatables.net-dt";
</style>

kthorngren

If the parameters change you will want to use ajax.data as a function like this example.

Kevin

allan

The ajax parameter of the Vue3 parameter is the correct way to do it. It maps to the ajax parameter, which in turn maps to jQuery's ajax option. So anything it can do, you can assigned to the Vue3 component's ajax parameter.

As Kevin notes, the ajax.data parameter is key and we extend it with the ability to be a function.

Allan