jQuery DataTable 在按钮单击上设置标题

在我看来，我有 2 个输入字段、1 个按钮和 1 个我正在使用的表格jQuery 数据表 https://datatables.net/.

我正在使用打印功能 https://datatables.net/extensions/buttons/examples/print/simple.html在我的数据表上。

我试图根据两个输入字段的值设置打印页面的标题，但它不起作用。

页面加载时，两个输入字段将为空白......这就是按钮发挥作用的地方。如果单击该按钮，那么这两个字段都会有一个值，我需要将这些值合并到标题中。

这是我的 jQuery：

var startDate = "";
var endDate = "";

$("#Search-Btn").click(function() {
    startDate = $("#Start-Date").val();
    endDate = $("#End-Date").val();
});

var firstTable = $("#Month-Table").DataTable({
    dom: 'Bfrtip',
    buttons: [
    {
        extend: 'print',
        title: 'Title For ' + locationName + ' ' + startDate + ' - ' + endDate,
        exportOptions: {
            columns: ':not(:last-child)'
        }
    }],
    "searching": false,
    "paging": false
});

Problem:

因为数据表是在页面加载时设置的。我无法设置标题来合并startDate and endDate基于按钮点击。我无法根据其他事件设置数据表的属性。

有没有办法做到这一点？

HTML

<div class="col-md-4 date-range">
    <div class="input-group date datetimepicker">
        @Html.TextBox("startDate", null, new { id = "Start-Date", @class = "form-control", @placeholder = "Start Date" })
        <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
        </span>
    </div>
</div>

<div class="col-md-1 date-range">
    <p class="text-center">
        <span class="fa fa-minus"></span>
    </p>
</div>

<div class="col-md-4 date-range">
    <div class="input-group date datetimepicker">
        @Html.TextBox("endDate", null, new { id = "End-Date", @class = "form-control", @placeholder = "End Date" })
        <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
        </span>
    </div>
</div>

正如我在评论中提到的，title选项的类型buttons.exportInfo() https://datatables.net/reference/api/buttons.exportInfo()。您可以对标题中的任何内容求值，并返回一个字符串：

...
buttons: [
            {
              extend: 'print',
              title: function() {
                  return 'Title For Location here ' + $("#Start-Date").val() + ' - ' + $("#End-Date").val();
              }
            }
        ]
...

JSFiddle https://jsfiddle.net/hescano/4tuupc5f/32/