<?php

define('LIMIT', 5);
define('OFFSET', 0);

$arrMusic = [
    'Открываем',
    'набор',
    'на',
    'оплачиваемую',
    'стажировку',
    'Вы',
    'спрашивали',
    'вы',
    'ждали',
    'и',
    'вот',
    'мы',
    'возвращаемся',
    'с',
    'анонсом',
    'стажировки',
    'для',
    'разработчиков!',
    '6 месяцев',
];

$len = sizeof($arrMusic); 
 
// $limit = $_GET['limit'] or LIMIT; 
$limit = isset($_GET['limit']) ? $_GET['limit'] : LIMIT; 
 
// $offset = $_GET['offset'] or OFFSET; 
$offset = isset($_GET['offset']) ? $_GET['offset'] : OFFSET; 
 
$portial = array_slice($arrMusic, $offset, $limit); 
// print($len); 
 
$str = '<ul id="feed">'; 
foreach ($portial as $value) { 
    $str .="<li>$value</li>"; 
} 
$str .= ''; 
 
$countPage = intdiv($len , $limit); 
// var_dump($countPage); 
 
$paginator = ''; 
for ($i = 0; $i < $countPage; $i++) { 
    $paginator .= '<a href= "./portial.php?offset='.LIMIT*$i.'&limit='.LIMIT.'">'.$i.'</a>&nbsp;'; 
} 

echo <<<abyr
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pangination</title>
</head>
<body>
   $str 
<div id="paginator">
   $paginator
   </div>
   <button type="button" click="getPage">Пам-пам</button>

</body>
 
</html>
<script>
 console.log('start script')
let parent = document.getElementById('paginator')
parent.addEventListener('click', getPage)
async function getFetch(url) {
   const response = await fetch(url, { method:'get'} )
 //   return await response.json(); 
   return await response.text(); 
   
}

// parent = document.getElementById('paginator')
// console.log(parent)
parent.addEventListener('click' , getPage )
 
async function getPage(event) {
  event.stopPropagation()
  event.preventDefault()
  let url = event.target.getAttribute('href')
  let data = await getFetch(url)
  feed = document.getElementById('feed')
  feed.innerHTML = feed.innerHTML + data
  console.log(data) 
}


</script> 
abyr;



