title: Data tables ajax post user selected parameters and reload table data
body: <p>I'm using Angular Data Tables (0.5.2) with DataTables 1.10.12  to load a Data Table instance. In the UI I provide a DatePicker (start and end date) for the user to select in order to limit the data by a date range. When the user click a submit button, my plan is to send a Data Tables ajax request back to the server to perform a new query including the start and end dates.</p>
  
  <p>I have the Data Tables ajax.reload() working in the code below, however, I cannot get the start and end date values added to the ajax form post. I've tried several different configurations but none have worked. Can anyone suggest a working solution to simply invoke an ajax request with custom parameters to the server so that it can reprocess the request and send back updated results to Data Tables? Thanks!</p>
  
  <pre><code>//HTML
  &lt;table datatable="" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="table table-striped table-bordered table-hover dataTable"&gt;&lt;/table&gt;
  
  //CONTROLLER
  function dashboardDownloadsCtrl($scope, dataService, DTOptionsBuilder, DTColumnBuilder, DTInstanceFactory, DTRenderer) {
  var vm = this;
  vm.dtInstance = {};
  vm.dtOptions = DTOptionsBuilder.newOptions()
  .withDOM('&lt;"html5buttons"B&gt;lTfgitp')
  .withOption('ajax', {
  type: 'POST',
  dataSrc: 'data',
  url: dataService.dashboard.downloads.route
  })
  .withOption('fnPreDrawCallback', function () { console.log('loading..') })
  .withOption('fnDrawCallback', function () { console.log('stop loading..') })
  .withOption('processing', true)
  .withOption('serverSide', true)
  .withOption('responsive', true)
  .withPaginationType('full_numbers');
  
  vm.dtColumns = [
      DTColumnBuilder.newColumn('RowNum').notVisible(),
      DTColumnBuilder.newColumn('first_name').withTitle('First name'),
      DTColumnBuilder.newColumn('last_name').withTitle('Last name')
  ];
  }
  
  // Directive submit button click
  $('button.applyBtn').click(function () {
  var $el = $(this);
  var startDate = $('.daterangepicker_start_input input').val();
  var endDate = $('.daterangepicker_end_input input').val();
  //get reference to controller
  var dtVm = scope.$parent.vm;
  var dtInstance = dtVm.dtInstance.DataTable;
  // add start and end date picker values to ajax data source and call reload
  dtVm.dtOptions.ajax.data = function(d) {
  d.datepicker_start_date = startDate;
  d.datepicker_end_date = endDate;
  };
  var resetPaging = true;
  dtInstance.ajax.reload(function(json){
  console.log('callback');}, resetPaging);
  });
  </code></pre>