Блог

Возможно ли иметь 3 разных запроса AJAX, и чтобы все они заполнялись в одну и ту же таблицу данных? Я пытался создать AJAX с несколькими URL-адресами, и это не сработало, но когда я использовал только один 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: [{
     
    }]
  });
});
  

Вы могли бы выполнять вызовы ajax отдельно и объединять результаты вместе, а затем создавать datatable

Сначала создайте функцию со всеми вашими вызовами 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);

};
  

Затем просто инициализируйте таблицу с данными

 function initializeTable(dataSet) {

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

Некоторые документы.

асинхронный / ожидающий

Js source DataTable