如何仅使用Pure JS而不使用任何库或框架在分页号之间添加点号？

Question

我正在尝试创建一个分页表格。一切正常，但是有一个问题让我陷入困境。我想要分页数字之间的点，但不是所有计数都被打印出来。我想要这样的东西：

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

我试图在字符串中连接点，但它总是给我错误。

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>

我得到的输出就像1 2 3 4 5 6 7 8 9 10 11 12

但我想要：

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

Answer 1

这是打破规则，例如始终打印按钮1，仅当当前页面大于3时才打印“ ...”，依此类推。

无论如何，下面的相关代码：

和JSFiddle：https://jsfiddle.net/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>";
}