Server side processing and sending additional params

lance-p

I'm initially loading the table below with some default data. In the UI i have a date picker calendar that allows to select a start and end date range. I thought initially that I could get the value the user select for the start and end date and then on the Submit button event, set the values for the dtColumns I have set to not visible, 'datepicker_start_date' and ''datepicker_end_date', and then call reloadData() to have the start and end date values sent to the server where it would fire off a query using the start and end date params I've sent back to it and then reload datatable, but this isn't working. Likely this is a better way to handle this. Can anyone recommend a solution to perform this passing params to the server for processing and then reloading datatables? Thanks.

 <table datatable="" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="table table-striped table-bordered table-hover dataTable"></table>

vm.dtOptions = DTOptionsBuilder.newOptions()
    .withDOM('<"html5buttons"B>lTfgitp')
    .withOption('ajax', {
        type: 'POST',
        url: dataService.dashboard.downloads.route,
        dataSrc: 'data',
        reloadData: function () {
            this.reload = true;
            return this;
        }
    })
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers');

vm.dtColumns = [
    DTColumnBuilder.newColumn('RowNum').notVisible(),
    DTColumnBuilder.newColumn('title').withTitle('Title'),
    DTColumnBuilder.newColumn('email').withTitle('Email'),
    DTColumnBuilder.newColumn('insert_date').withTitle('Date'),
    DTColumnBuilder.newColumn('datepicker_start_date').notVisible(),
    DTColumnBuilder.newColumn('datepicker_end_date').notVisible()
];

 //Submit button click 
 $('button.applyBtn').click( function() {
    var dtVm = scope.$parent.vm;
    dtVm.dtColumns['datepicker_start_date'] = startDate;
    dtVm.dtColumns['datepicker_end_date'] = endDate;
    dtVm.dtOptions.ajax.reloadData();
 }

Tom (DataTables)

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

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

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

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

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