кнопки jquery datatables: ['excel'] не работает, когда таблица встроена в document.ready (), но работает, когда таблица создается динамически

#javascript #jquery #datatables

Вопрос:

У меня есть приложение php/javascript (Apache 2.4 / php8 в Windows). Я использую таблицы данных jquery (datatables.net) и закодировали:

 dom: 'Brftip', buttons: ['excel']

для нескольких таблиц в моем приложении.

Это отлично работает, когда я динамически строю таблицу в javascript в результате выбора в другой таблице. Однако, когда я кодирую это в таблице, встроенной в мою функцию готовности документа, кнопка не отображается. Ниже приведен раздел relavent моего $(документа).функция готовности() :

 $(document).ready(function () {

$(‘#задания’).Данные({

 dom: 'Bfrtip',  buttons: ['excel'],   select: {  sytle: 'single',  items: 'row'  },   ajax: {  url: "php/joblist.php",  type: "POST",  dataSrc: "",   data: function (d) {  var activeOnlyCheckbox = document.getElementById("activeOnly");  if (activeOnlyCheckbox.checked) {  return JSON.stringify({activeOnly: 'yes'});  } else {  return JSON.stringify({activeOnly: 'no'});  }  }  },   paging: false,  scrollY: '60vh',  scrollCollapse: true,   columns: [  {data: "JOB_ID"},  {data: "LAST_START"},  {data: "LAST_FINISH"},  {data: "LAST_STATUS"}   ],   "columnDefs": [{  "targets": 3,  "data": "LAST_STATUS",  "render": function (data, type, row, meta) {  if (screen.width gt; 1500) {  return "lt;div class='text-wrap status-column'gt;"   data   "lt;/divgt;";  } else {  return "lt;div class='text-wrap status-column'gt;"   data   "lt;/divgt;";  }  }  }] }); });

Что я упускаю?

Ответ №1:

Здесь я создал фиктивные данные ответа и ввел их в таблицу, чтобы посмотреть, будет ли напечатан файл excel, и он работает просто отлично.

 var data = [ {"JOB_ID": "1", "LAST_START": "Random Data", "LAST_FINISH": "More Random Data", "LAST_STATUS": "Last one"} ]  $(document).ready(function() {  var table = $('#myTable').DataTable({   data: data,  paging: false,  scrollY: '60vh',  scrollCollapse: true,  select: {  sytle: 'single',  items: 'row'  },   ajax: {  url: "php/joblist.php",  type: "POST",  dataSrc: "",   data: function (d) {  var activeOnlyCheckbox = document.getElementById("activeOnly");  if (activeOnlyCheckbox.checked) {  return JSON.stringify({activeOnly: 'yes'});  } else {  return JSON.stringify({activeOnly: 'no'});  }  }  },  columns: [  {data: "JOB_ID"},  {data: "LAST_START"},  {data: "LAST_FINISH"},  {data: "LAST_STATUS"}   ],   "columnDefs": [{  "targets": 3,  "data": "LAST_STATUS",  "render": function (data, type, row, meta) {  if (screen.width gt; 1500) {  return "lt;div class='text-wrap status-column'gt;"   data   "lt;/divgt;";  } else {  return "lt;div class='text-wrap status-column'gt;"   data   "lt;/divgt;";  }  }  }],  dom: 'lt;"toolbar"gt;lt;"right"Bgt;rt',  buttons: ['excel'],  order: [  [0, 'asc']  ]    });  });

 lt;headgt;  lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/gt; lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css"/gt; lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/gt; lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css"/gt;  lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"gt;lt;/scriptgt; lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"gt;lt;/scriptgt; lt;script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"gt;lt;/scriptgt; lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"gt;lt;/scriptgt; lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"gt;lt;/scriptgt; lt;script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"gt;lt;/scriptgt; lt;script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"gt;lt;/scriptgt; lt;/headgt;  lt;table id="myTable" class="table table-bordered" cellspacing="0" width="100%"gt;  lt;thead class="table-dark"gt;  lt;trgt;  lt;thgt;Job IDlt;/thgt;  lt;thgt;Last Startlt;/thgt;  lt;thgt;Last Finishlt;/thgt;  lt;thgt;Last Statuslt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;/tbodygt; lt;/tablegt;

Убедитесь, что вы включили правильные расширения для таблицы. Для того, чтобы кнопка excel/экспорт работала. Вам нужно иметь Buttons , а также HTML5 Export расширения.