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

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

5k3ptic5k3ptic Posts: 2Questions: 1Answers: 0

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

Answers

  • 5k3ptic5k3ptic Posts: 2Questions: 1Answers: 0
    edited November 2022

    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>
    
  • kthorngrenkthorngren Posts: 17,724Questions: 25Answers: 4,204

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

    Kevin

  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin

    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

Sign In or Register to comment.