Angular datatable with server side processing Ajax URL not well formed after the first time

Question

so I'm working with the MEAN stack (mongo, express, angular, node) and I'm trying to set a table with server-side processing, I managed to load the data correctly but when I search, change the page or another action the URL that is sent to the server is not the same as the first time. I have this controller for the table:

    .controller('ClientDatatableController', function($scope, $state, $filter, $compile, Client, popupService, DTOptionsBuilder, DTColumnBuilder){
    var vm = this;

    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', '/api/clients/')
        .withDataProp('data')
        .withOption('serverSide', true)
        .withOption('processing', true)
        .withOption('order', [0, 'desc'])
        .withOption('stateSave', true)
        .withPaginationType('full_numbers')
        .withOption('createdRow', function(row) {
            // Recompiling so we can bind Angular directive to the DT
            $compile(angular.element(row).contents())($scope);
        })
        .withColumnFilter({
        aoColumns: [{
            type: 'number'
        }, {
            type: 'text',
            bRegex: true,
            bSmart: true
        }, {
            type: 'number'
        }, {
            type: 'text',
            bRegex: true,
            bSmart: true
        }, {
            type: 'text',
            bRegex: true,
            bSmart: true
        }]
    });

    vm.dtColumns = [
        DTColumnBuilder.newColumn('numeroCliente').withOption('name','numeroCliente').withTitle('Número Cliente'),
        DTColumnBuilder.newColumn('nome').withOption('name','nome').withTitle('Nome Cliente'),
        DTColumnBuilder.newColumn('nif').withOption('name','nif').withTitle('NIF'),
        DTColumnBuilder.newColumn('').withOption('name','morada.concelho').withTitle('Concelho').renderWith(function(data, type, full){
            var morada = full.morada;
            if (morada.concelho) return morada.concelho;
            else return '';
        }),
        DTColumnBuilder.newColumn('').withOption('name','morada.localidade').withTitle('Localidade').renderWith(function(data, type, full){
            var morada = full.morada;
            if (morada.localidade) return morada.localidade;
            else return '';
        }),
        DTColumnBuilder.newColumn('_id')
                       .withTitle('')
                       .withOption('sortable', false)
                       .withClass('button-column')
                       .renderWith(function(data, type){
            var href = $state.href("viewClient", {id: data});

            return '<a class="btn btn-default" href=' + href + '><span class="fa fa-search"></span></a>';
        }),
        DTColumnBuilder.newColumn('_id')
                       .withTitle('Apagar')
                       .withOption('autoWidth', false)
                       .withOption('width','10%')
                       .withOption('sortable', false)
                       .renderWith(function(data, type){
                           return '<a class="btn btn-danger btn-xs"  ng-click="deleteClient(\'' + data + '\')">Delete</a>'
                       })
    ];

I didn't find anyone with the same problem so far, the GET requests are the following:

GET /api/clients/?draw=1&columns%5B0%5D%5Bdata%5D=numeroCliente&columns%5B0%5D%5Bname%5D=numeroCliente&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=nome&columns%5B1%5D%5Bname%5D=nome&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=nif&columns%5B2%5D%5Bname%5D=nif&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=&columns%5B3%5D%5Bname%5D=concelho&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=&columns%5B4%5D%5Bname%5D=localidade&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=_id&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=false&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B6%5D%5Bdata%5D=_id&columns%5B6%5D%5Bname%5D=&columns%5B6%5D%5Bsearchable%5D=true&columns%5B6%5D%5Borderable%5D=false&columns%5B6%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B6%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=desc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1508546310543 200 53.234 ms - 17452
GET /?draw=2&columns=%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D&order=%5Bobject%20Object%5D&start=20&length=10&search=%5Bobject%20Object%5D&sRangeSeparator=~ 200 0.744 ms - 5926

As you can see the second request don't have /api/clients before, if anyone can help me I would really appreciate it.

Thank you

Answer 1

Well I figured out that the problem was with the ColumnFilter plugin, so I changed the request type to POST and set the fnServerData function:

.withFnServerData((sSource, aoData, fnCallback, oSettings) => {
            $http.post('api/clients', {
                tableData: {
                    draw: aoData[0].value,
                    columns: aoData[1].value,
                    order: aoData[2].value,
                    start: aoData[3].value,
                    length: aoData[4].value,
                    search: aoData[5].value
                }                    
            }).then((data) => {                        
                fnCallback(data.data);                        
            });
        })