selecting the ajax url for the datatable

Question

selecting the ajax url for the datatable

I need to select the datatable ajax URL based on whether it contains data1, data2, or data3.

Below is my code snippet:

$(document).ready(function() {
var $table = $('#datatable1');
    $table.DataTable({
      "columnDefs": [
                     {"className": "dt-center", "targets": "_all"}
                    ],  
   if(containdata1){
   ajax: {
           url: "/api/dunapi/"+containdata1,
                type: 'GET'
            },

   if(containdata2){
    ajax: {  
        url  : "/api/dunapi/"+containdata2,
        type : 'GET'                      
            },
   
   }
   if(containdata3){
    ajax: {  
        url  : "/api/dunapi/"+containdata3,
        type : 'GET'                      
            },
   
   }

I am looking for a solution where the ajax URL selection can be dynamic based on the data available.

javascript datatable

Answer 1

Answer №1

If you're looking to combine data from multiple sources, a good approach would be to fetch the data outside of DataTable. Utilize jQuery's ajax() function (or another JavaScript client like axios) to retrieve all the necessary data, merge it into a single object, and then pass it into the data option of DataTables.

For example:

var data = []

if(containdata1){
    await axios.get("/api/dunapi/"+containdata1).then(res => {
        data = data.concat(res.data)
    })
}
if(containdata2){
    await axios.get("/api/dunapi/"+containdata2).then(res => {
        data = data.concat(res.data)
    })
}
if(containdata3){
    await axios.get("/api/dunapi/"+containdata3).then(res => {
        data = data.concat(res.data)
    })
}

Then when defining your datatable:

{
// include other datatable options
data: data
.....
}

Note: Remember to add async before the ready function as we are using await in each request:

$(document).ready(async function() {
......
}

Answer 2

If you're looking to combine data from multiple sources, a good approach would be to fetch the data outside of DataTable. Utilize jQuery's ajax() function (or another JavaScript client like axios) to retrieve all the necessary data, merge it into a single object, and then pass it into the data option of DataTables.

For example:

var data = []

if(containdata1){
    await axios.get("/api/dunapi/"+containdata1).then(res => {
        data = data.concat(res.data)
    })
}
if(containdata2){
    await axios.get("/api/dunapi/"+containdata2).then(res => {
        data = data.concat(res.data)
    })
}
if(containdata3){
    await axios.get("/api/dunapi/"+containdata3).then(res => {
        data = data.concat(res.data)
    })
}

Then when defining your datatable:

{
// include other datatable options
data: data
.....
}

Note: Remember to add async before the ready function as we are using await in each request:

$(document).ready(async function() {
......
}

selecting the ajax url for the datatable

Answer №1

Similar questions

Tips for efficiently saving data using await in Mongoose

javascript guide to dynamically update the glyphicon based on value changes

Ways to enable automatic scrolling of a page as the content expands (Utilizing collapsible elements)

"Improving User Experience with React.js Serverside Rendering and Interactive Event Handling

Error: Attempted to call $scope.map.control.getGMap function when clicking on the Map, but it is not defined

Adding text after a div in React-JS using Bootstrap: A quick guide

There seems to be a complete absence of rendering in this particular vue

Is there a way to restrict the number of checkboxes selected based on the values of radio buttons?

Incorporating grids for a flickering drag and drop effect in Javascript

Guide on capturing JSON objects when the server and client are both running on the same system

Transforming arrays into nested objects using JavaScript

Which is better: JavaScript, Json, or Html?

Display customized modal content in React based on specific criteria

Navigating to redirected URL within jquery's get() function

creating a function within an object that allows for chaining

Loading JavaScript in the background using Java and HtmlUnit

When using jQuery to add an item to a List, it disappears immediately after

Mobile devices are unable to properly implement the Jquery show/hide feature

A guide on identifying the data type of a value entered into an HTML table using JavaScript

Encountered an issue with the Mongoose Schema method: The model method is not recognized as a