How to paginate json response?

I have this tabs with different query,

Sample: If I click the Mineral Transactions I want to paginate the data in my display

this is my controller

  public function showMineralTransactions(Request $request, $id)
    {

        $mineralTransactions = MineralTransaction::where('player_id', $id)->latest()->paginate(10);
        return response()->json([
            'mineralTransactions' => $mineralTransactions,
            'mineralTypes' => MineralTypes::array()
        ]);

    }

and this is my component

            <template v-else>
                <tr class="text-gray-500 dark:text-gray-400">
                    <td class="px-4 py-3 text-sm text-center italic" colspan="9">
                        No mineral transactions available.
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
    <!-- <Pagination :data="pagination" /> -->
</div>

vincent15000

2 years ago

Level 63

To do that, I create an API collection and an API resource and I return the collection.

Here is an example.

Course resource

public function toArray($request)
{
    return [
        'id' => $this->id,
        'unit_name' => $this->topic->unit->name,
        'topic_name' => $this->topic->name,
        'topic_background_color' => $this->topic->background_color,
        'topic_text_color' => $this->topic->text_color,
        'date_fr' => $this->date_fr,
        'time_range_fr' => $this->time_range_fr,
        'hours_number' => $this->hours_number,
        'room_name' => $this->room->name ?? null,
        'can_update' => auth()->user()->can('update', $this->resource),
        'can_delete' => auth()->user()->can('delete', $this->resource),
    ];
}

Course collection

public function toArray($request)
{
    return parent::toArray($request);
}

public function with($request)
{
    return [
        'meta' => [
            'can_create' => auth()->user()->can('create', Course::class),
        ],
    ];
}

Controller

return new CourseCollection(Course::
    with('topic.unit', 'room')
    ->where('training_id', $training->id)
    ->when($topicIds, function ($query) use ($topicIds) {
        $query->whereIn('topic_id', $topicIds);
    })
    ->orderByDesc('datetime')
    ->paginate(10);

Then in the returned collection you will have all pagination datas you need to handle this in the frontend.

anonymouse703

2 years ago

Level 6

I solved it... I just store the pagination response

const pagination = ref([]);

async function fetchData() {
    try {
        const response = await axios.get(
            route("admin.players.showReferrals", { id: props.playerId })
        );
        referrals.value = response.data.referrals;
        pagination.value = response.data;
    } catch (error) {
        console.error("Error fetching mineral log data:", error);
    }
}

then I used the pagination component

  <Pagination v-if="pagination && pagination.referrals" :data="pagination.referrals" class="w-full" />

1 like

Please or to participate in this conversation.