2

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!

1

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.