I'm trying to use server-side processing with angular datatables. In order to filter results, I can't use the column filter plugins because I want to implement my own custom search fields and a custom "search" button that will trigger a new query to the server.

I'm fetching the data from the server using DTOptions withFnServerData instead of withOption('ajax',...) because this way I can reuse an angular service that encapsulates the URL, and it works fine for pagination and sorting. This is the simplified code in the view:

<div ng-controller="myController">
    <div ng-click="makeQuery()">Search</div>
    <table id="mytable" datatable=""  dt-instance="dtInstance" dt-options="dtOptions" dt-columns="dtColumns" >
    </table>
</div>

And the javascript for the controller (omitting dtColumns):

$scope.makeQuery = function() {
// how do I trigger a query to the server from here,
// that does exactly the same as the function passed to withFnServerData ?
}
$scope.dtInstance = {};

$scoper.dtOptions = DTOptionsBuilder
.newOptions()
.withBootstrap()
.withOption('responsive', true)
.withOption('processing', false)
.withOption('serverSide', true)
.withOption('searching', false)
.withPaginationType('full_numbers')
.withDataProp('data')
.withFnServerData(function (sSource, aoData, fnCallback, oSettings) {
    var draw = aoData[0].value;
    var columns = aoData[1].value;
    var order = aoData[2].value;
    var start = aoData[3].value;
    var length = aoData[4].value;
    var search = aoData[5].value;

    var queryFilter = ... // build my custom filter params extracting values from the aoData variables above

    //dataProvider encapsulates a call to the right URL using $http and returns a promise
    dataProvider(queryFilter).then(function(response) {
        var records = {
            'draw': draw,
            'recordsTotal': response.data.numRecords,
            'recordsFiltered': response.data.numRecords,
            'data': response.data.records
        };
        fnCallback(records);
    });
});

But I have no idea how to trigger a new server query when my custom search button is clicked.

My specific questions are:

  • Is it actually possible to make it work with withFnServerData?

  • I've found another post here Angular-DataTables custom filter which suggests using $scope.dtInstance.reloadData(), but that example is using DTOptions withOption('ajax', ...), which I try to avoid.

Is that the only way to make it work? Any help will be welcome. Thanks!

share|improve this question
    
The examples in the following post make use of withFnServerData and reloadData() without issue: github.com/l-lin/angular-datatables/issues/225 – David Tansey Sep 13 at 17:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.