仅在抽象中使用数据表？答案

【问题标题】：Use Datatables only in abstract?仅在抽象中使用数据表？
【发布时间】：2020-05-14 15:23:28
【问题描述】：

我有一个 X-Y 问题，希望得到解决。

我的 X 是我想查询数据库并在客户端开始下载返回的数据。我有查询下来，没有问题。我可以毫无问题地将数据发送给客户端。我的问题是数据在网页中的下载。

我的 Y 是我想通过滥用 DataTables 来做到这一点。

我正在开发一个 node.js 项目，该项目在项目的一部分中使用了 DataTables。太棒了，我非常感激。它接收数据，显示一个表格，非常好。

我想知道以下是否可行：

在项目的另一部分，我只想显示一个“下载”按钮，它启动 Ajax 以从服务器获取数据，然后在用户浏览器上启动下载。

我想知道，因为我已经将 DataTables 依赖项作为页面的一部分提供了服务，是否可以加载数据表而不显示它，而只显示带有自定义文本扩展的 csv button？

为什么我认为这是值得的：

我对 DataTables 中已经内置的下载功能更有信心，而不是手动实现一种方法来实现此目的。
假设这相对简单，它将使代码库更加干净和可读。当依赖项中存在完美的下载功能时，无需将容易失败的下载功能复杂化。
我希望避免向客户端发送比
如果目的还不够的话，这也是一个巧妙的技巧。

关于更多上下文，这里是一些 index.ejs 页面：

<ul class="menu custom-descriptor">
    <li class="menu-item view-table"><i class="ignore click icon table"></i> View Table <i class="icon right angle"></i></li>
    <li class="menu-item download"><i class="ignore click icon table"></i> Download <i class ="icon down angle"></i></li>
</ul>

下面是一些支持它的 JavaScript（违规部分标有???）：

// OnClick listener:
$('.menu-item').on('click', function(e){
  let item = e.target;
  let classes = item.classList
  let parentClasses = item.parentElement.classList

  if(classes.contains('context-disabled'))     { return; }

  else if(classes.contains('view-table') && parentClasses.contains('custom-descriptor')) { displayTableHandler(); }
  else if(classes.contains('download') && parentClasses.contains('custom-descriptor')) { downloadDataHandler(); }
});


// handler:
function downloadDataHandler() {
  $.ajax({
    type: "GET",
    //...
    success: function(response){
      // ???
    }
  });
}

【问题讨论】：

标签： javascript datatables

【解决方案1】：

是的，这是完全可能的。这是一个通用解决方案，后面附有包含更详细信息的来源的链接：

在具有display: none 样式属性的表上初始化 DataTable 对象。这将使整个表格隐藏在视图之外。
为了显示按钮，请使用按钮文档的direct insertion 部分。风格适当。如果在一个 li 内，this answer 可能有用。
使用button.trigger() 方法以避免用户必须单击一次按钮来准备它，然后再次下载它。

最后你的 HTML 然后处理程序可能看起来像：

<ul class="menu custom-descriptor">
    <li class="menu-item view-table"><i class="ignore click icon table"></i> View in Table <i class="icon right angle"></i></li>
    <li class="menu-item download"><i class="ignore click icon table"></i> Download <i class ="icon down angle"></i></li>
    <div style="display: none;">
        <table id="views" class="ui celled table">
            <thead id="views-head"></thead>
            <tbody></tbody>
        </table>>
    </div>
</ul>

function downloadDataHandler() {
  $.ajax({
    type: "GET",
    //...
    success: function(response){
      // build out DataTable data
      table = $("#views").DataTable({
        // data, etc
        buttons:[
            {
              extend: 'csv',
              text: '<i class=\"ignore click icon table\"></i> Download <i class =\"icon down angle\"></i>'
            }
          ]
        });
      let button = table.buttons().container()[0].childNodes[0];
      button.classList.//remove and add as needed for styling
      $(".download").replaceWith(button);

      table.button().trigger();

    }
  });
}

其他来源：https://datatables.net/forums/discussion/62163

【讨论】：