How to use JQuery Datatable with an API (with paging)

I am using JQuery datatable to display data from an API endpoint. My problem is that the endpoint is using pagination i.e. chunks its results into pages. So the endpoint can return more than one page but my datatable only picks the first page. I think I am supposed to add some conditions may be next and previous buttons if the endpoint says there is a next or previous page. How do I do this (adding buttons) while ensuring datatable is still functional. Adding buttons will break datatable's functionality.

This is a sample API request:

{
   "perpage":10,
   "page":1,
   "from": "2012-06-01",
   "to":"2017-11-13"
}

This is a sample API response

{
    "meta": {
        "code": 1,
        "reason": "success"
    },
    "page_details": {
        "has_next_page": true,
        "has_previous_page": false,
        "next_page": 2,
        "previous_oage": 0,
        "total": 36
    },
    "total_amount": 118438347,
    "transactions": [
        {
            "biller_id": 3,
            "channel_name": "innovectives",
            "customer_category_code": "prepaid",
            "customer_paid": "500",
            "date": "2017-11-08",
            "meter_no": "04177190131",
            "payment_mode": "POS",
            "product_code": "PHEDC"
        }
   ]
}

This is my datatable script

$("#order-table2").DataTable({
    searching: true,
    "pagingType": "full_numbers",
    dom: 'Bfrtip',
    buttons: [
        'csv', 'excel','print'
    ],
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total collections over all pages
        total = api
            .column( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
        // Total collections over this page
        pageTotal = api
            .column( 4, {"filter": "applied"} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total commission over all pages
        totalNo = api
            .column( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total no over this page
        pageTotalNo = api
            .column( 4, {"filter": "applied"} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        pageTotalf = totalNo.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
        totalf = pageTotalNo.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");

        pageTotalNo = total.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
        totalNo = pageTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");


        document.getElementById('amount').innerHTML=pageTotalf;
        document.getElementById('amountt').innerHTML=totalf;

    }

});

Here is my view:

<table class="table table-bordered" id="order-table2">
                    <thead>
                    <th>S/N</th>
                    <th>Date</th>
                    <th>Biller</th>
                    <th>Collector</th>
                    <th>Amount</th>
                    <th>Account/Meter No.</th>
                    <th>Payment Mode</th>
                    </thead>
                    <tbody>

                    @if (isset($data))
                        <?php $i = 0; ?>
                        @foreach ($data as $datum)
                            <?php
                            $i++;
                            $date = date('d-m-Y', strtotime($datum['date'] ));
                            ?>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>

Here is my controller:

$items = Curl::to(env('CORE_HOST').env('CORE_AUTH'))
                ->withData(['username' => env('CORE_USERNAME'), 'password' => env('CORE_PASSWORD')])
                ->asJson(true)
                ->post();
            $token = $items['result']['token'];
            //Then pass token to endpoint to fetch billers
            $now = date('Y-m-d', strtotime(Carbon::now()));
            $items = Curl::to(env('CORE_HOST').env('CORE_TRANSACTION_HISTORY'))
                ->withData([ 'perpage' => 20, 'page' => 1, 'from' => $now, 'to' => $now])
                ->asJson(true)
                ->post();
            $data = $items['transactions'];
            //dd($data);
            return view('transaction.index', compact('data', 'url'));

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2z61Fym
via IFTTT