I'm a beginner and I'm working on a symfony project. I am trying to implement a dynamic pagination when listing my teams. I followed a code that's using it associated with a dynamic search too but I don't want that I only want to get the pagination work. There's the variable PATH that I need to change but I have no clue how.
const PATH = name ? "/teams/search/" + name + "/" + pageNumber : "/teams/SearchAll/" + pageNumber;
I just want to display 6 teams per page without any search criteria.
TeamsController:
/**
* @Route("/", name="app_teams_index", methods={"GET"})
*/
public function index(TeamsRepository $teamsRepository, Request $request, PaginatorInterface $paginator): Response
{
$em = $this->getDoctrine()->getManager();
$teams = $em->getRepository(Teams::class)->findAll();
$teams = $paginator->paginate(
$teams,
$request->query->getInt('page', 1), 6
);
return $this->render('teams/index.html.twig', [
'teams' => $teamsRepository->findAll(),
]);
}
Templates:Teams: index.html.twig
{% extends 'base.html.twig' %}
{% block title %}Teams{% endblock %}
{% block body %}
<style>
.imgTest {
width: 60px;
height: 60px;
}
</style>
<h1>Teams</h1>
<div class="row">
<div class="col-lg-8" style="margin-left: 150px">
<div class="row" id="teamHolder">
</div>
</div>
</div>
<div class="navigation">
<nav class="blog-pagination justify-content-center d-flex">
<ul class="pagination" id="navigationPaginated">
</ul>
</nav>
</div>
<script>
var pageNumber = 1;
const teamHolder = document.getElementById('teamHolder');
const searchField = document.getElementById('searchBarTeam');
const paginated = document.getElementById('navigationPaginated');
function getTeams(e, pageNumber = 1) {
const PATH = name ? "/teams/search/" + name + "/" + pageNumber : "/teams/SearchAll/" + pageNumber;
fetch(PATH, {
method: 'GET',
}).then(res => res.json()).then((data) => {
teamHolder.innerHTML = "";
data.forEach(team => {
if (typeof (team) !== "object") {
paginated.innerHTML = "";
for (let i = 1; i <= team; i++) {
paginated.innerHTML += `<li class="page-item"><a class="page-link" href="#" onclick="getTeams(null,${i})">${i}</a></li>`;
}
} else {
teamHolder.innerHTML += `<div class="col-lg-5">
<div class="col-lg-10 col-md-15">
<div class="single_place">
<div class="thumb">
<img src="/teamlogos/5/${team.teamLogo}" alt="" />
</div>
<div class="place_info">
<p>${team.id}</p>
<p>${team.teamName}</p>
<p>${team.teamTag}</p>
<p>${team.teamMail}</p>
<p>${team.teamReg}</p>
</div>
</div>
</div>
</div>`
}
})
}).catch((err) => console.log(err))
}
getTeams(null)
</script>
{% endblock %}
Error: Failed to fetch data