Answers

• Tom (DataTables) Posts: 139Questions: 0Answers: 26

  June 2016

  Hi

  I would recommend using ajax.data as a function to get the dates required and then reload the data.

  This is with the disclaimer of this is how you would do it without Angular, it may be different when using Angular but this is how you would do it with native datatables.

  Thanks

  Tom
• lance-p Posts: 3Questions: 1Answers: 0

  June 2016

  Okay. The ajax reload is working, but the new data fields ("datepicker...") are not being added to the ajax post form data. Any ideas on how to get the fields added to the form data?

      var dtInstance=dtVm.dtInstance.DataTable;
      dtVm.dtOptions.ajax.data = function(d) {
                  d.datepicker_start_date = startDate;
                  d.datepicker_end_date = endDate;
              };
       dtInstance.ajax.reload(function(json){
                  console.log('callback');
         }, true);
  
• allan Posts: 63,353Questions: 1Answers: 10,444 Site admin

  June 2016 Answer ✓

  The ajax.data option needs to be set at the point when the DataTable is initialised (unlike a lot of Angular specific code it isn't functional in the sense that you can dynamically set options after initialisation - only the API can be used after initialisation).

  So your ajax.data function needs to be set in the init object. There are a few examples on the ajax.data page showing how that is done with plain boring Javascript.

  Allan
• lance-p Posts: 3Questions: 1Answers: 0

  June 2016 edited June 2016

  Thanks. That was the issue. I don't see this fully described in the examples. But piecing together the ajax.reload() with the ajax.data() methods is what is needed. It would be great to have an example of the full solution together. The code below is ultimately how I got it working.

  //HTML
  <table datatable="" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="table table-striped table-bordered table-hover dataTable"></table>
  
  //CONTROLLER
  function dashboardDownloadsCtrl($scope, dataService, DTOptionsBuilder, DTColumnBuilder, DTInstanceFactory, DTRenderer) {
  var vm = this;
  vm.dtInstance = {};
  vm.dtOptions = DTOptionsBuilder.newOptions()
  .withDOM('<"html5buttons"B>lTfgitp')
  .withOption('ajax', {
  type: 'POST',
  dataSrc: 'data',
  url: dataService.dashboard.downloads.route,
      data: function (d) {
              d.datepicker_start_date = $('.daterangepicker_start_input input').val();
              d.datepicker_end_date = $('.daterangepicker_end_input input').val();
          }
  })
  .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);
  });
  
• allan Posts: 63,353Questions: 1Answers: 10,444 Site admin

  June 2016 Answer ✓

  There are a couple of example code snippets of ajax.data being used as a function on its reference page and also in this example.

  What the documentation doesn't clearly state is that the init option cannot be modified after initialisation. I will add that into the manual page.

  Allan