I am trying to create a paginated table. In that everything is working fine but there is a problem in which I got stuck. I want dots between paginated numbers but instead of that all the counts are getting printed. I want something like this:

if 1  => 1 2 3 ... 15(last page)
if 2  => 1 2 3 ...15
if 3  => 1 2 3 4 ... 15
if 4  => 1...3 4 5...15
if 15 =>1...13 14 15
if 14=>1... 13 14 15
if 13 => 1 ... 12 13 14 15
if 12 => 1 ... 11 12 13 ... 15

I tried to concat dots in string but it keeps giving me error.

let start = 1;
let limit = 1;

function getUrl() {
  return '=' + start + '&per_page=' + limit;
}

function getData(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => loadDataIntoTable(data))
    .catch(err => console.log(err));
}

function loadDataIntoTable(data) {
  let id = [];
  let email = [];
  let firstName = [];
  let lastName = [];
  let avatar = [];
  data['data'].forEach((pagi) => {
    id.push(pagi.id);
    email.push(pagi.email);
    firstName.push(pagi.first_name);
    lastName.push(pagi.last_name);
    avatar.push(pagi.avatar);
    return pagi.id;
  });
  let tableBody = document.getElementById('pagi-body');

  let html = "";

  for (let i = 0; i < email.length; i++) {
    html += "<tr>";
    html += "<td>" + id[i] + "</td>";
    html += "<td>" + email[i] + "</td>";
    html += "<td>" + firstName[i] + "</td>";
    html += "<td>" + lastName[i] + "</td>";
    html += "<td><img alt='' src=" + avatar[i] + "></td>";
    html += "</tr>";
  }

  tableBody.innerHTML = html;

}

function init() {
  const url = getUrl();
  getData(url);

}

init();

totalcount = 12;



var i;
var text = "";
for (i = 1; i <= 12; i++) {
  text += "<button  onclick=\"handlevent(" + i + ")\">" + (i) + "</button>";
}
document.getElementById("page").innerHTML = text;

function page(prev, dotted, next) {
  if (prev) {
    if (start > 1) {
      start--;
    }
    url = getUrl();
    getData(url);
  }
  if (dotted) {
    console.log("dotted");
  }
  if (next) {
    if (start < totalcount) {
      start++;
    }
    url = getUrl();
    getData(url);
  }
}



function handlevent(value) {
  start = value;
  url = getUrl();
  getData(url);

}

<ul>
    <li>
        <button id="left" onclick="page('prev','','')" class="disable">Prev</button>
    </li>
    <li id="page" onclick="page('','dots','')"></li>
    <li id="pagination"></li>
    <li>
        <button id="right" onclick="page('','','next')">Next</button>
    </li>
</ul>

I am trying to create a paginated table. In that everything is working fine but there is a problem in which I got stuck. I want dots between paginated numbers but instead of that all the counts are getting printed. I want something like this:

if 1  => 1 2 3 ... 15(last page)
if 2  => 1 2 3 ...15
if 3  => 1 2 3 4 ... 15
if 4  => 1...3 4 5...15
if 15 =>1...13 14 15
if 14=>1... 13 14 15
if 13 => 1 ... 12 13 14 15
if 12 => 1 ... 11 12 13 ... 15

I tried to concat dots in string but it keeps giving me error.

let start = 1;
let limit = 1;

function getUrl() {
  return 'https://reqres.in/api/users?page=' + start + '&per_page=' + limit;
}

function getData(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => loadDataIntoTable(data))
    .catch(err => console.log(err));
}

function loadDataIntoTable(data) {
  let id = [];
  let email = [];
  let firstName = [];
  let lastName = [];
  let avatar = [];
  data['data'].forEach((pagi) => {
    id.push(pagi.id);
    email.push(pagi.email);
    firstName.push(pagi.first_name);
    lastName.push(pagi.last_name);
    avatar.push(pagi.avatar);
    return pagi.id;
  });
  let tableBody = document.getElementById('pagi-body');

  let html = "";

  for (let i = 0; i < email.length; i++) {
    html += "<tr>";
    html += "<td>" + id[i] + "</td>";
    html += "<td>" + email[i] + "</td>";
    html += "<td>" + firstName[i] + "</td>";
    html += "<td>" + lastName[i] + "</td>";
    html += "<td><img alt='' src=" + avatar[i] + "></td>";
    html += "</tr>";
  }

  tableBody.innerHTML = html;

}

function init() {
  const url = getUrl();
  getData(url);

}

init();

totalcount = 12;



var i;
var text = "";
for (i = 1; i <= 12; i++) {
  text += "<button  onclick=\"handlevent(" + i + ")\">" + (i) + "</button>";
}
document.getElementById("page").innerHTML = text;

function page(prev, dotted, next) {
  if (prev) {
    if (start > 1) {
      start--;
    }
    url = getUrl();
    getData(url);
  }
  if (dotted) {
    console.log("dotted");
  }
  if (next) {
    if (start < totalcount) {
      start++;
    }
    url = getUrl();
    getData(url);
  }
}



function handlevent(value) {
  start = value;
  url = getUrl();
  getData(url);

}

<ul>
    <li>
        <button id="left" onclick="page('prev','','')" class="disable">Prev</button>
    </li>
    <li id="page" onclick="page('','dots','')"></li>
    <li id="pagination"></li>
    <li>
        <button id="right" onclick="page('','','next')">Next</button>
    </li>
</ul>

The output which I am getting is like 1 2 3 4 5 6 7 8 9 10 11 12

but I want:

if 1 => 1 2 3 ... 15(last page) if 2 => 1 2 3 ...15 if 3 => 1 2 3 
4 ... 15 if 4 => 1...3 4 5...15 if 15 =>1...13 14 15 if 14=>1... 
13 14 15 if 13 => 1 ... 12 13 14 15 if 12 => 1 ... 11 12 13 ... 15

• javascript
• pagination

2 Answers 2

It is a matter of breaking down the rules like always print button 1, print "..." only if current page is greater than 3 and so on.

Anyway here the relevant code below:

and JSFiddle: https://jsfiddle/8cpfvyxz/1/

totalcount = 12;
currentPage = 4;


var HTML = "";


if (totalcount <= 6) {
    for (i = 1; i <= totalcount; i++) {
      HTML += addButton(i);
  }
}
else {

    // Always print first page button
    HTML += addButton("1");

    // Print "..." only if currentPage is > 3
    if (currentPage > 3) {
        HTML += "...";
    }

    // special case where last page is selected...
    if (currentPage == totalcount) {
        HTML += addButton(currentPage - 2);
    }

    // Print previous number button if currentPage > 2
    if (currentPage > 2) {
       HTML += addButton(currentPage - 1);
    }

    //Print current page number button as long as it not the first or last page
    if (currentPage != 1 && currentPage != totalcount) {
       HTML += addButton(currentPage);
    }

    //print next number button if currentPage < lastPage - 1
    if (currentPage < totalcount - 1) {
        HTML += addButton(currentPage + 1);
    }

    // special case where first page is selected...
    if (currentPage == 1) {
        HTML += addButton(currentPage + 2);
    }

    //print "..." if currentPage is < lastPage -2
    if (currentPage < totalcount - 2) {
       HTML += "...";
    }

    //Always print last page button if there is more than 1 page
    HTML += addButton(totalcount);
}

document.getElementById("page").innerHTML = HTML;


function addButton(number) {
    return "<button  onclick=\"handlevent(" + number + ")\">" + (number) + "</button>";
}

This solution works for pagination elements of fixed length more than 7. It will be 9 in my example, starting with page 0. You can adapt it for your desired length by changing numbers accordingly.

  let totalcount = 12;
  let currentPage = 4;
  
  // If we can fit all pages in our limit
  if (totalcount < 9) {
    return [...Array(totalcount).keys()];
  }
  // Always print first and last page
  const result = Array(9);
  result[0] = 0;
  result[8] = totalcount - 1;
  // Precaution
  currentPage = (Math.min(Math.max(0, currentPage), totalcount - 1));
  // First pages
  if (currentPage < 4) {
    for (let i = 1; i < 7; i++) {
      result[i] = i;
    }
    result[7] = '...';
    return result;
  }
  // Last pages
  if (currentPage >= totalcount - 5) {
    for (let i = 2; i < 8; i++) {
      result[i] = totalcount - 9 + i;
    }
    result[1] = '...';
    return result;
  }
  // Pages in the middle
  for (let i = 2; i < 7; i++) {
    result[i] = currentPage - 4 + i;
  }
  result[1] = '...';
  result[7] = '...';
  return result;

  // result: [ 0, "...", 2, 3, 4, 5, 6, "...", 11 ]

Then use your function to convert array to HTML and insert it.