SweetAlert2 弹出窗口中的数据表答案

【问题标题】：DataTable in SweetAlert2 Pop-UpSweetAlert2 弹出窗口中的数据表
【发布时间】：2019-05-31 19:21:03
【问题描述】：

这是可能的还是我在浪费时间？

尝试了很多东西。

首先我有

$html = listings_swal()

这是

function listings_Swal() {
    return '<table id="datatable"><thead><tr><th>Col1</th><th>Col2</th></tr></thead>
    <tfoot><tr><th>Col1</th><th>Col2</th></tr></tfoot></table>';

这只是没有内容的空表。

这是我打开 SweetAlert 对话的目标链接：

<a id="listings">Listings</a>

还有我的脚本：

  echo "<script>
$('#listings').on('click', function(){
  swal({
    title: 'Listings',
    html:'" . $html . "',
    showCancelButton: false,
  showConfirmButton: false,
  showCloseButton: true}, function() {
      $.ajax({
    url: 'listings.js',
    dataType: 'script'
      })
      .done(function(data) {
        swal('Deleted!', 'our file was successfully deleted!', 'success');
      })
      .error(function(data) {
        swal('Oops', 'We couldnt connect to the server!', 'error');
      });
    });
     });
</script>";

在我的listings.js 文件中

我有标准的数据表初始化

$(document).ready(function() {
  $('#datatable').dataTable({
     .....

我尝试了一些没有成功的事情。

比如在甜言蜜语对话后添加脚本

  echo "<script>
$('#listings').on('click', function(){
  swal({
    title: 'Table',
    html:'" . $html . "',
    showCancelButton: false,
  showConfirmButton: false,
  showCloseButton: true
  })
});
</script>";
echo '<script src="listings.js"></script>';

我还尝试在我的 sweetalert 脚本 table.php 中执行 php ajax 返回，它刚刚有一个 echo '<script src="listings.js"></script>';

我尝试修改我的 listings_Swal() 函数，以便在关闭 </table><script src="listings.js"></script> 后添加脚本。

如果不在 sweetalert2 对话框弹出窗口中，这一切都可以正常工作 --- 并且 sweetalert 对话确实有效，但表格没有填充 DataTable 内容（它只是简单地显示 <table><thead> 和 @987654332 @ 没有从 DataTables 生成的表行。

我确信我的脚本可以正常工作并填充表格行，如果它们不在 sweetalert2 对话框中并且只是普通的 html 表格，所以我对如何让 DataTables 初始化表格行的加载感到困惑在甜蜜的警报弹出窗口中。

不确定我还能尝试什么。 DOM 是否无法识别表来初始化 Datatable？有人有什么想法吗？

谢谢！

编辑：澄清一下，正如我所说，sweetalert2 对话框确实会弹出，只是没有用数据表的行填充它，也没有显示控制台/js 错误，所以我不确定如何调试。

【问题讨论】：

标签： jquery database datatables sweetalert2

【解决方案1】：

知道了。我想我不得不把两者分开。执行 SweetAlert 命令 (swal)，然后执行 Datatable 命令。

<script>
      $(document).ready(function(){
$('#listings').on('click', function(){
  Swal.fire({
    title: 'Listings',
    html: '<?php echo $html; ?>'
});
    $('#datatable').DataTable( {
    "processing": true,
    "serverSide": false,
    "ajax": "scripts/server_processing.php"
  } )
    });
});
</script>

按预期工作！

【讨论】：