如何使用 DataTables ExcelHtml5 将日期导出到 Excel 文件答案

【问题标题】：How to export date to excel file using DataTables ExcelHtml5如何使用 DataTables ExcelHtml5 将日期导出到 Excel 文件
【发布时间】：2022-01-22 22:48:41
【问题描述】：

我目前正在使用 DataTables jquery 插件 (https://datatables.net/) 创建一个带有日期过滤器和列排序的表格，可以导出到 Excel 文件。

数据表导出按钮允许您设置一个名为 messageTop 的属性，该属性将在导出的数据上方显示一条消息 (https://datatables.net/reference/button/excelHtml5)

日期范围过滤器使用两个<input> 标签设置，ID 为min 和max。我正在尝试将这些日期值传递给导出的 excel 文件，以便我可以使用 messageTop 显示日期范围，如下所示：

<script>

  $(document).ready(function() {

      // Custom filtering function which will search data in column four between two values
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var min = minDate.val();
            var max = maxDate.val();
            // data[1] is the date column
            var date = new Date( data[1] );
     
            if (
                ( min === null && max === null ) ||
                ( min === null && date <= max ) ||
                ( min <= date   && max === null ) ||
                ( min <= date   && date <= max )
            ) {
                return true;
            }
            return false;
        }
    );

      // Refilter the table
      $('#min, #max').on('change', function () {
          table.draw();
      });


    // Create date inputs
      minDate = new DateTime($('#min'), {
          format: 'MMMM Do YYYY'
      });
      maxDate = new DateTime($('#max'), {
          format: 'MMMM Do YYYY'
      });

      var table = $('#invoicetable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
              extend: 'excelhtml5',
              messageTop: 'Invoice Period: ' + minDate.val()  + ' to ' + maxDate.val()
            }
        ]
      } );
  } ); 
</script>

问题是minDate.val() 和maxDate.val() 在导出的excel 文件中只是显示为null。如果我在表实例化的正上方执行console.log(minDate.val())，它仍然会给出一个空值，但如果我尝试从重新过滤表的函数中访问<input> 元素，我可以访问输入字段中的日期。

问题似乎在于，当我尝试在表实例化中使用日期输入的值时，它只是使用页面首次加载时的值并且输入仍然为空。用户输入一些值后，我将如何导出当前日期输入？

这里是我的html代码供参考：

           <table border="0" cellspacing="5" cellpadding="5">
              <tbody>
                <tr>
                  <td>Start Date:</td>
                  <td><input type="text" id="min" name="min"></td>
                </tr>
                <tr>
                  <td>End Date:</td>
                  <td><input type="text" id="max" name="max"></td>
                </tr>
              </tbody>
            </table>

            <table class="table" id="invoicetable">
            <thead>
              <tr>
                <th scope="col">Invoice #</th>
                <th scope="col">Invoice Date</th>
                <th scope="col">Customer Name</th>
                <th scope="col">Invoice Amount</th>
              </tr>
            </thead>
            <tbody>

              <tr>
                <td>1</td>
                <td>2021-12-21</td>
                <td>test</td>
                <td>100</td>
              </tr>
            </tbody>
          </table>

【问题讨论】：

标签： javascript html jquery excel datatables

【解决方案1】：

我的问题的解决方案需要使用messageTop 中的函数，以便在每次单击按钮时运行它，从而获取输入字段的当前值。

messageTop: function() {
   return 'Invoice Period: ' + String(minDate.val())  + ' to ' + String(maxDate.val());
},

我尝试完成此操作的先前方法导致messageTop 被静态定义，并且在输入任何内容之前只包含输入的空值。

【讨论】：