jQuery 数据表将数据导出到 Excel

Question

我正在尝试直接从数据表导出到 Excel。

从ajax调用开始：

displayRecords();
function displayRecords()
{
  $.ajax({
    url: 'process/getRecords.php',
    type: 'POST',
    data: '',
    dataType: 'html',
    success: function(data, textStatus, jqXHR)
    {
      var jsonObject = $.parseJSON(data); 
      var table = $('#resultsTable').DataTable({    
      {
        "data": jsonObject,
        "columns": [
          {"data": "JOB_REFERENCE"},
          {"data": "VOYAGE_REFERENCE"},
          // few more columns
        ],
        "iDisplayLength": 25,
        "scrollY": 500,
        "scrollX": true,
        "bDestroy": true,
        "paging": true,
        "stateSave": true
      }
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      console.log('fail: '+ errorThrown);
    }
  });

   // button click to export results
   var tableresults = $('#resultsTable').dataTable();

   $("#btnExport").on('click', function(e) 
   {
     e.preventDefault();
     window.open('data:application/vnd.ms-excel,' +
       encodeURIComponent(table[0].outerHTML));
   });
}

使用上述所有内容，我可以成功从数据表中导出结果。 我什至可以使用过滤器搜索深入到较小的数据集，并导出结果。

我使用以下小提琴：http://jsfiddle.net/donpayne/jzdjdo3z/

我遇到的问题在于数据表的“显示条目”下拉列表。 通常，下拉列表设置为 10。无论您是否向下过滤搜索，如果总记录数大于“显示条目”下拉列表，Excel 工作表将仅返回下拉列表中设置的总数。

你可以在小提琴中测试我在说什么。 将“显示条目”下拉列表设置为 10，然后导出到 Excel。 如果您注意到，该表中共有 58 条记录。 Excel 工作表仅返回 10 条记录。

我需要返回所有记录。 如果我有 2000 条记录，并且“显示条目”下拉列表设置为 10，则我需要导出的 Excel 工作表包含所有 2000 条记录。

如果我将搜索过滤到大约 56 条记录，情况也是如此；当我导出到 Excel 时，无论“显示条目”下拉列表设置为何，该电子表格上总共应有 56 条记录。

如上所述，我引用了小提琴中的代码并对其进行了更改以适合我的数据表。

Answer 1

我认为最好的办法是删除分页，然后进行导出，然后在完成后重新打开分页。

我做了一些小改动：

$(function () 
{
    var table = $('#example').DataTable();

    $("#btnExport").click(function(e) 
    {
        table.page.len( -1 ).draw();
        window.open('data:application/vnd.ms-excel,' + 
            encodeURIComponent($('#example').parent().html()));
      setTimeout(function(){
        table.page.len(10).draw();
      }, 1000)

    });
});

更新了小提琴：http://jsfiddle.net/jzdjdo3z/176/

页面长度文档：https://datatables.net/reference/api/page.len()

分页选项文档：https://datatables.net/reference/option/paging

我不确定为什么使用 dataTables 与 DataTables 初始化会产生差异，但确实如此。所以请留意这一点。

Answer 2

如果您想下载为.xlsx格式，请使用以下代码。您还可以在这里定义文件的名称。 脚本：

<script src="https://unpkg.com/xlsx/dist/shim.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/[email protected]/Blob.js"></script>
<script src="https://unpkg.com/[email protected]/FileSaver.js"></script>

Java脚本：

var table = $('#example').DataTable();
 $("#btnExport").click(function(e) 
{
   var fileName = "test";
   var fileType = "xlsx";
   var table_obj = document.getElementById("example");
   var wb = XLSX.utils.table_to_book(table_obj, {sheet: "Sheet JS"});
   return XLSX.writeFile(wb, null || fileName + "." + (fileType || "xlsx"));
});