Q:

Server process data table continously when next button is clicked

I used datatable to process big data on my backend. In DTOptionsBuilder, I'm used withFnServerData method to get a range of data from the database. It parsed everything in the table from start to limit. But the below pagination number was always one. Seems like not working, I only can use the top left number filter but is not what I want.
Controller
$scope.dtColumns = [
  DTColumnBuilder.newColumn('d', 'column').withOption('defaultContent', ""),
  DTColumnBuilder.newColumn('m', 'mukim').withOption('defaultContent', ""), ....
];

$scope.pageData = {
        total: 0
};

var get = function(sSource, aoData, fnCallback, oSettings){
      var draw = aoData[0].value;
      var order = aoData[2].value;
      var start = aoData[3].value;
      var length = aoData[4].value;

      var params = {
            start:start,
            limit:length
      };

      ValuationService.SearchValuation(params, function(result, response){
        if(result == true){
            var records = {
                    'draw': 0,
                    'recordsTotal': 0,
                    'recordsFiltered': 0,
                    'data': []
            };
            if(response.result){
                  records = {
                    'draw': draw,
                    'recordsTotal': response.total_data,
                    'recordsFiltered':response.result.length,
                    'data': response.result
                };
            }
            $scope.pageData.total = response.total_data;

            fnCallback(records);
        }
      });
}

$scope.dtOptions = DTOptionsBuilder.newOptions()
        .withFnServerData(get) // method name server call
        .withDataProp('data')// parameter name of list use in getLeads Fuction
            .withOption('processing', true) // required
            .withOption('serverSide', true)// required
            .withOption('paging', true)// required
            .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('rowCallback', rowCallback)
         .withDOM('lrtip');

function rowCallback (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    $compile(nRow)($scope);
}

HTML
table.row-border.hover(datatable="", dt-instance="dtInstance",dt-columns="dtColumns", dt-options="dtOptions" style="overflow:auto;")

What I want
The table below will show the number of pagination. I can click the next and previous. When I click next, it will call the API again to retrieve and parse another start to limit into table.

Current Issue
Table pagination shows '1' only, next button disabled. 

I can solve the issue by select the number at top left corner, but it shown in one page which I don't want.

A:

The problem lies on the filter data part, because my data was filtered, not showing all the data. Simply by changing the records filtered respect to total data available will solve the issue.
records = {
     'draw': draw,
     'recordsTotal': response.total_data,
     'recordsFiltered':response.total_data, // Change total_data
     'data': response.result
};

