jQuery DataTable Set Title On Button Click

user_5525311 0
Viewed 1588

On my view, I have 2 input fields, 1 button and 1 table of which I am using jQuery DataTables.

I am using the print functionality on my datatable.

I am trying to set the title of the print page based off of the values of the 2 input fields, but it is not working.

On page load, the 2 input fields will be blank.. which is where the button comes into play. If that button is clicked then both of those fields will have a value and I need those values to be incorporated into the title.

Here is my 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:

Because the datatable is setup on page load.. I can't set the title to incorporate the startDate and endDate based on button click. I can't set properties of the datatable based on other events.

Is there a way to do this?

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>
datatable jquery javascript
1 Answers

As I mentioned in my comment, the title option is of type buttons.exportInfo(). You can evaluate anything into the title, and return a string:

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

JSFiddle

user_7525270
Related