来自 3 个 URL 的 AJAX 请求以填充同一个表

Question

Is it possible to have 3 different AJAX requests, and have them all populate to the same DataTable(table)? I have tried and tried to create a AJAX with multiple URLS and it didn't work, but when I used just one URL, it works fine. The issue is I need to pull from three different subsites.

Here is my code:

$(document).ready(function() {
  $('#myTable').DataTable({
    'ajax': {
      'url': "_api/web/lists/getbytitle('XDeliverables')/items?$select=Program, Deliverable, To, Date, Approved, Notes",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function(data) {
        return data.value.map(function(item) {
          return [
            item.Program,
            item.Deliverable,
            item.To,
            item.Date,
            item.Approved,
            item.Notes
          ];
        });
      }
    },
    columnDefs: [{
     
    }]
  });
});

Is it possible to do something along the lines of: (or atleast something similar)

$(document).ready(function() {
  $('#myTable').DataTable({
    'ajax': {
      'url': "_api/web/lists/getbytitle('XDeliverables')/items?$select=Program, Deliverable, To, Date, Approved, Notes",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function(data) {
        return data.value.map(function(item) {
          return [
            item.Program,
            item.Deliverable,
            item.To,
            item.Date,
            item.Approved,
            item.Notes
          ];
        });
      }
    },
    'ajax': {
      'url': "_api/web/lists/getbytitle('YDeliverables')/items?$select=Program, Deliverable, To, Date, Approved, Notes",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function(data) {
        return data.value.map(function(item) {
          return [
            item.Program,
            item.Deliverable,
            item.To,
            item.Date,
            item.Approved,
            item.Notes
          ];
        });
      }
    },
    'ajax': {
      'url': "_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program, Deliverable, To, Date, Approved, Notes",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function(data) {
        return data.value.map(function(item) {
          return [
            item.Program,
            item.Deliverable,
            item.To,
            item.Date,
            item.Approved,
            item.Notes
          ];
        });
      }
    },
    columnDefs: [{
     
    }]
  });
});

Answer 1

You could do the ajax calls separately and concatenate the results together and then create the datatable

First make a function with all your ajax calls

async function getTableData() {
let baseURL = "_api/web/lists/getbytitle('${type}')/items?$select=Program, Deliverable, To, Date, Approved, Notes"

let tempURL = baseURL.replace("${type}", "XDeliverables");
let response1 = await $.ajax({
  url: tempURL,
  headers: { 'Accept': 'application/json;odata=nometadata' }
});

tempURL = baseURL.replace("${type}", "YDeliverables");
let response2 = $.ajax({
  url: tempURL,
  headers: { 'Accept': 'application/json;odata=nometadata' }
});

tempURL = baseURL.replace("${type}", "ZDeliverables");
let response3 = $.ajax({
  url: tempURL,
  headers: { 'Accept': 'application/json;odata=nometadata' }
});

let dataSet = [...response1, ...response2, ...response3];

// call function that creates the datatable
initializeTable(dataSet);

};

Then just initialize the table with the data

function initializeTable(dataSet) {

    $('#myTable').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    });
};

Some docs.

async/await

Js source DataTable