wenzhixin / bootstrap-table

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
https://bootstrap-table.com/
MIT License
11.72k stars 4.44k forks source link

How to Fetch Server Side Pagination from Laravel Resource #4959

Closed doubleprincez closed 4 years ago

doubleprincez commented 4 years ago

I'm getting Error in mounted hook: "TypeError: columns[0][Symbol.iterator] is not a function"

from my vue controller when i try using laravel resource. Transactions Widget has the following code

<bootstrap-table
            data-search="true"
            data-filter-control="true"
            data-show-export="true"
            data-pagination="true"
            data-side-pagination="server"
            data-show-toggle="true"
            data-url="http://test.dev/api/admin/get-transactions"
            data-show-columns="true"
            data-export-types="['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf']"
        >
            <thead>
            <tr>
                <th data-field="id">ID</th>
                <th data-field="username">User Name</th>
                <th data-field="order_id">Order ID</th>
                <th data-field="reference"> Reference</th>
                <th data-field="rrr">RRR</th>
                <th data-field="amount">Amount</th>
                <th data-field="paid">Paid</th>
                <th data-field="payment_date">Payment Date</th>
            </tr>
            </thead>
        </bootstrap-table>

And the controller has the following code

        $transactions = PaymentTransaction::with('user')->paginate(12);
        return AdminTransactionsResource::collection($transactions);

The resource just returns the array below

    return [
            'id' => $this->id,
            'username' => $this->user->name,
            'order_id' => $this->order_id,
            'reference' => $this->reference,
            'rrr' => $this->rrr,
            'amount' => $this->amount,
            'paid' => $this->paid=='1'||$this->paid==1?"Yes":"No",
            'payment_date' => $this->payment_date
        ];

If you have any online example of how to fetch from laravel resource, please kindly direct me to it. I don't know if this error is as a result of laravel resource or in the bootstrap table iterator itself

wenzhixin commented 4 years ago

https://bootstrap-table.com/docs/api/table-options/#url

Note that the required server response format is different depending on whether the 'sidePagination' option is specified. See the following examples: Without server-side pagination With server-side pagination

What data does your url(http://test.dev/api/admin/get-transactions) return?

doubleprincez commented 4 years ago

i'm returning a Laravel Resource result, paginated in JSON format with data, meta and links

doubleprincez commented 4 years ago

I included the data-data-field="data" and passed additional attribute for the total to the JSON resultset

 return AdminTransactionsResource::collection($transactions)->additional([
            'total' => $transactions->count(),
        ]);