I am Using Laravel 10 And Vue 3 Composition Api But my Bootstrap5Pagination is not showing inside the DOM .i install the Component using NPM
The Command
npm i laravel-vue-pagination
basically i am using v-for to loop through the rows and use sorting function to sort through the columns .
But When i try to paginate though the records the pagination component is not showing inside the Vue Page
VUE 3 File
<template>
<div class="card">
<div class="row px-3 pt-3">
<span class="col-lg-4 mb-2">
<router-link to="/Manage-Vendor">
<button class="btn btn-primary">
<fa icon="fa-solid fa-circle-plus" /> Add New
</button></router-link
>
</span>
<span class="col-lg-8">
<div class="d-flex justify-content-end mb-2">
<div class="input-group" style="max-width: 350px">
<input
class="form-control"
type="text"
v-model="searchData.searchinp"
placeholder="Search Something.."
id="example-search-input"
/>
<a
href="javascript:;"
class="py-2 px-3 text-primary search-btn border-primary border rounded-sm"
style="border-end-end-radius: 7px; border-top-right-radius: 7px"
@click="vendorSearch()"
>
<fa icon="fa-solid fa-magnifying-glass"></fa>
</a>
</div>
</div>
</span>
</div>
<div class="table-responsive p-3">
<table
class="table table-bordered border-primary"
style="border-radius: 2px"
>
<thead>
<tr>
<th scope="col" class="text-primary fw-bold">Image</th>
<th
scope="col"
class="text-primary fw-bold sortable"
@click="sortColumn('vendor_org')"
:class="{
asc:
sortData.column === 'vendor_org' &&
sortData.direction === 'asc',
desc:
sortData.column === 'vendor_org' &&
sortData.direction === 'desc',
}"
>
Orgnization
</th>
<th
scope="col"
class="text-primary fw-bold sortable"
@click="sortColumn('vendor_name')"
:class="{
asc:
sortData.column === 'vendor_name' &&
sortData.direction === 'asc',
desc:
sortData.column === 'vendor_name' &&
sortData.direction === 'desc',
}"
>
Vendor Name
</th>
<th
scope="col"
class="text-primary fw-bold sortable"
@click="sortColumn('vendor_contact')"
:class="{
asc:
sortData.column === 'vendor_contact' &&
sortData.direction === 'asc',
desc:
sortData.column === 'vendor_contact' &&
sortData.direction === 'desc',
}"
>
Contact No
</th>
<th
scope="col"
class="text-primary fw-bold sortable"
@click="sortColumn('status')"
>
Status
</th>
<th scope="col" class="text-primary fw-bold">Action</th>
</tr>
</thead>
<tbody style="max-height: 10px" class="scroll">
<tr
v-for="(item, index) in tableData"
:key="index"
style="max-width: 200px"
>
<td class="responsive-text">
<img
:src="item.img_url"
class="rounded"
alt=""
style="max-width: 50px"
/>
</td>
<td class="responsive-text">{{ item.vendor_org }}</td>
<td class="responsive-text">{{ item.vendor_name }}</td>
<td>{{ item.vendor_contact }}</td>
<td style="width: 200px">
<div class="d-flex justify-content-center">
<select
name=""
id=""
class="form-select form-select-md"
style="border: 1px solid #3a57e8"
>
<option value="">Active</option>
<option value="">Not active</option>
</select>
</div>
</td>
<td style="width: 300px">
<span class="">
<span class="">
<router-link to="/" class="me-2">
<button class="btn btn-primary text-white">Edit</button>
</router-link></span
>
<span
><router-link to="/" class="me-2">
<button class="btn btn-success text-whit">View</button>
</router-link></span
>
<span
><router-link to="/" class="me-2 text-danger">
<span class="btn btn-danger text-white"> Delete </span>
</router-link></span
>
</span>
</td>
</tr>
</tbody>
</table>
<div class="">
<Bootstrap5Pagination
:data="tableData"
@pagination-change-page="vendorRecords"
></Bootstrap5Pagination>
</div>
<div>
<div class="" style="width: 150px">
<select v-model="sortRec" id="" class="form-select form-select-md">
<option selected value="">Records</option>
<option value="10">10</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="all">All</option>
</select>
</div>
</div>
<Loader :show="apicall.loading"></Loader>
</div>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { API_URL } from "../../../config/path.js";
import api from "../../../lib/api.js";
import "vue3-toastify/dist/index.css";
import Loader from "../../../components/UI/Loader.vue";
import { Bootstrap5Pagination } from "laravel-vue-pagination";
const tableData = ref([]);
const sortRec = ref("");
const apicall = reactive({
loading: false,
});
const sortData = reactive({
column: null,
direction: "asc",
});
const sortColumn = async (columnName) => {
apicall.loading = true;
if (sortData.column === columnName) {
sortData.direction = sortData.direction === "asc" ? "desc" : "asc";
} else {
sortData.direction = "asc";
}
sortData.column = columnName;
const response = await api("POST", `${API_URL}Vendor/Sort`, sortData);
tableData.value = response.data.data;
if (response.data.status === 200) {
apicall.loading = false;
} else {
apicall.loading = true;
}
};
const searchData = reactive({
searchinp: null,
});
const vendorSearch = async () => {
apicall.loading = true;
const response = await api("POST", `${API_URL}Vendor/Search`, searchData);
tableData.value = response.data.data;
if (response.status === 200) {
apicall.loading = false;
} else {
apicall.loading = true;
}
};
const vendorRecords = async (page = 1) => {
apicall.loading = true;
const response = await api("GET", `${API_URL}vendor/records?page=${page}`);
tableData.value = response.data.data.data;
if (response.status === 200) {
apicall.loading = false;
} else {
apicall.loading = false;
}
};
onMounted(vendorRecords);
</script>
<style scoped>
th.sortable {
position: relative;
cursor: pointer;
}
th.sortable::after {
font-family: "Font Awesome 5 Free";
/* Use the Font Awesome font family */
font-weight: 900;
/* Set the font weight for solid icons */
content: "\f0dc";
position: absolute;
right: 8px;
color: #5266ec;
}
th.sortable.asc::after {
content: "\f0d8";
/* Upward pointing arrow for ascending order */
}
th.sortable.desc::after {
content: "\f0d7";
/* Downward pointing arrow for descending order */
}
th.sortable:hover::after {
color: #5266ec;
}
.responsive-text {
white-space: nowrap;
/* Prevent text from wrapping to the next line */
overflow: hidden;
/* Hide overflowing content */
text-overflow: ellipsis;
/* Display an ellipsis for overflowed text */
max-width: 150px;
}
.scroll {
max-height: 200px;
overflow-y: auto;
}
.action-column {
position: relative;
/* Set position to relative */
}
.icon-hv {
font-size: 20px;
transition: font-size 0.3s ease;
/* Smooth transition animation */
transform: translate(-50%, -50%);
/* Center the icon */
}
.icon-hv:hover {
font-size: 25px;
}
</style>
Laravel File
public function vendorRecord()
{
try {
$manageVendor = new ManageVendor;
$data = $manageVendor->paginate(10);
// Transform each item in the collection
$data->getCollection()->transform(function ($item) {
// Assuming $item->vendor_img contains the relative path to the image
$item->img_url = asset($item->vendor_img);
return $item;
});
return response()->json([
'data' => $data->toArray(), // Return paginated data as array
'message' => 'Vendor List'
]);
} catch (\Exception $e) {
return response()->json([
'error' => 'Error occurred while fetching vendor records.',
'message' => $e->getMessage()
], 500);
}
}