php and angularjs limited offset for paginating

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')

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.


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

 .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',

            .withOption('processing', true)
            .withOption('serverSide', true)

 ////api call from PHP funtion
 $scope.fetchTrx = function () {
                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;
                $scope.item.reconcile_date = res.reconcile_date;
                // console.log($;
                $scope.item.actual_balance = 
                $scope.item.end_balance = 
            }).finally(function () {
                // calculate

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.

Source: AngularJS