时间戳

首页 > 解决方案 > 将数据导出到 Excel 的 jQuery 数据表

javascript - 将数据导出到 Excel 的 jQuery 数据表

问题描述

我正在尝试直接从数据表导出到 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/

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

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

我需要返回所有记录。如果我有 2000 条记录，并且 Show Entries 下拉菜单设置为 10，我需要导出的 Excel 工作表包含所有 2000 条记录。

如果我将搜索过滤到大约 56 条记录，则相同；当我导出到 excel 时，无论 Show Entries 下拉菜单设置为什么，我应该在该电子表格上总共有 56 条记录。

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

标签： javascriptjquerydatatablesexport

解决方案

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

我做了几个小改动：

$(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 进行初始化会有所不同，但确实如此。所以请注意这一点。

推荐阅读