AJAX 来自 3 个 URL 的请求填充相同 Table

Question

是否可以有 3 个不同的 AJAX 请求，并将它们全部填充到同一个 DataTable(table)？我尝试并尝试用多个 URLS 创建一个 AJAX 但它没有用，但是当我只使用一个 URL 时，它工作正常。问题是我需要从三个不同的子站点中提取内容。

这是我的代码：

$(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: [{
     
    }]
  });
});

是否可以按照以下方式做一些事情：（或至少类似的事情）

$(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

您可以单独执行 ajax 调用并将结果连接在一起，然后创建数据table

首先使用所有 ajax 个调用创建一个函数

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);

};

然后用数据

初始化table

function initializeTable(dataSet) {

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

一些文档。

async/await

Js source DataTable

AJAX 来自 3 个 URL 的请求填充相同 Table

AJAX Request from 3 URLS to Populate Same Table

javascript

ajax

sharepoint

jquery

datatables