来自3个URL的AJAX请求填充同一表 [英] AJAX Request from 3 URLS to Populate Same Table

问题描述

是否可以有3个不同的AJAX请求，并将它们全部填充到同一DataTable(table)中?我尝试过尝试创建具有多个URL的AJAX，但是它不起作用，但是当我仅使用一个URL时，它就可以正常工作.问题是我需要从三个不同的子站点中拉取.

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.

这是我的代码:

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

推荐答案

您可以分别进行ajax调用，并将结果连接在一起，然后创建数据表

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

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

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" }
        ]
    });
};

一些文档.

异步/等待

Js源数据表

这篇关于来自3个URL的AJAX请求填充同一表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！