title: How to pass additional parameters to Jquery Datatable Ajax Call
body: <p>I have a Jquery Datatable with server side actions..Here I need a date between search of a datetime column..I would like to pass the <em>FromDate</em> and <em>ToDate</em> input field values to the jquery datatable ajax call method..</p>
  
  <p>Here What i have done till now:</p>
  
  <p><strong>Input fields:</strong> </p>
  
  <pre><code>&lt;table class="table table-bordered table-condensed" border="0" cellspacing="5" cellpadding="5"&gt;
         &lt;tbody&gt;
             &lt;tr&gt;
                 &lt;td&gt;From Date: &lt;input type="text" id="fromDate" name="fromDate" value=""&gt;&lt;/td&gt;
                 &lt;td&gt;To Date: &lt;input type="text" id="toDate" name="toDate"&gt;&lt;/td&gt;
             &lt;/tr&gt;
       &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Jquery Datatable Code:</strong></p>
  
  <pre><code>    &lt;script&gt;
              $(document).ready(function () {
  
                  // Setup - add a text input to each header cell
  
                  $('#myTable thead tr:eq(0) th:not(:last)').each(function () {
                      var title = $(this).text();
                      $(this).html('&lt;input type="text" placeholder="Search ' + title + '" /&gt;');
                  });
  
                  var table = $('#myTable').DataTable({
                      //"scrollY": "300px",
                      "scrollX": true,
                      "fixedColumns": {
                          leftColumns: 1,
                          rightColumns: 1
                      },
                      "AutoWidth": false,
                      "processing": true, // for show progress bar
                      "serverSide": true,
                      "aLengthMenu": [[2, 5, 6, -1], [2, 5, 6, "All"]],
                      "iDisplayLength": 2,
  
  
                      "ajax": {
                          "url": "/Payment/DueCollectioListLoad",
                          "type": "POST",
                          "datatype": "json",
  
                        //this is what i have done to pass the input fields values
  
                          "data": { fromDate: $("#fromDate").val(), toDate: $("#toDate").val()}
                      },
                      "columns": [
  
                          //here is other column fields
  
                      ]
                  });
  
                  //// Apply the search
  
                  $(table.table().container()).on('focusout', 'thead input', function () {
                      table.column($(this).parent().index() + ':visible')
                          .search(this.value)
                          .draw();
                  });
  
                  $('#maxValue').on('focusout', function () {
                      table.draw();
                  });
  
  
              });
  
  
          &lt;/script&gt;
  </code></pre>
  
  <p><strong>Here is Controller Action method:</strong></p>
  
  <pre><code>public ActionResult DueCollectioListLoad(string fromDate, string toDate)
  {
       //Here is necessary code
  }
  </code></pre>
  
  <p><strong>Everything is doing fine but Unfortunately <em>fromDate</em> and <em>toDate</em> parameter values are getting always null..any help please!</strong></p>