title: jQuery DataTable Set Title On Button Click
body: <p>On my view, I have 2 input fields, 1 button and 1 table of which I am using <a href="https://datatables.net/" rel="nofollow noreferrer">jQuery DataTables</a>.</p>
  
  <p>I am using the <a href="https://datatables.net/extensions/buttons/examples/print/simple.html" rel="nofollow noreferrer">print functionality</a> on my datatable.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>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
  });
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>Because the datatable is setup on page load.. I can't set the title to incorporate the <code>startDate</code> and <code>endDate</code> based on button click.  I can't set properties of the datatable based on other events.</p>
  
  <p>Is there a way to do this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="col-md-4 date-range"&gt;
      &lt;div class="input-group date datetimepicker"&gt;
          @Html.TextBox("startDate", null, new { id = "Start-Date", @class = "form-control", @placeholder = "Start Date" })
          &lt;span class="input-group-addon"&gt;
              &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-1 date-range"&gt;
      &lt;p class="text-center"&gt;
          &lt;span class="fa fa-minus"&gt;&lt;/span&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-4 date-range"&gt;
      &lt;div class="input-group date datetimepicker"&gt;
          @Html.TextBox("endDate", null, new { id = "End-Date", @class = "form-control", @placeholder = "End Date" })
          &lt;span class="input-group-addon"&gt;
              &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>