php和angularjs限制偏移的分页

Question

PHP (Laravel 4.2)

//PHP function
$rowsPerPage = 50;
$num = 1;
$offsets = ($num - 1) * $rowsPerPage; 
$data['trans'] = Transaction::withoutBranch()
->select('id', 'amount')
->where('payment_date', '>=', '2019-05-06')
->limit($rowsPerPage)
->offset($offsets)
->get();

In PHP, the total of records in the database is 100. I did a query to limit 50 records for the first page then 50 records for seconds.

AngularJS

 //api call from PHP funtion
 fetchTrx: function (data) {
       return api.call('api/bank_recon/fetch_trx', data);
            },

 //controller
 .controller('bankReconCtrl', function ($scope, $state, Module, 
CSRF_TOKEN, toastr, $controller, actionBar, $compile,DTOptionsBuilder) {

 var vm = this;
        vm.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                // Either you specify the AjaxDataProp here
                url: 'api/bank_recon/fetch_trx',
                type: 'POST',

            })
            .withDataProp('data')
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withPaginationType('full_numbers');

 ////api call from PHP funtion
 $scope.fetchTrx = function () {
            Module.fetchTrx({
                month: $scope.item.month,
                year: $scope.item.year,
                account_id: $scope.item.account_id,
                page_number: $scope.item.page_number
            }).then(function(res) {
                angular.forEach(res.trans, function (trx) {

                });

                $scope.trans = res;
                console.log($scope.trans);
                $scope.item.reconcile_date = res.reconcile_date;
                // console.log($scope.trans.photos);
                $scope.item.actual_balance = 
Math.roundCurrency(res.actual_balance);
                $scope.item.end_balance = 
Math.roundCurrency(res.end_balance);
                $scope.form.$setPristine();
            }).finally(function () {
                // calculate
                $scope.calBalance();
            });
        };

My expectation is the page will loading 50 records first then second 50 records will loading from the server when a user clicked on the second page. This is to avoid large records render at the same time lead to the page is lagging. Therefore.

I using I-lin angularjs datatable server-side processing to achieve my expectation. So far the datatable only displays 50 records not the total of 100 records.