title: How to add dots between paginated numbers in pagination only with Pure JS and not with any library or framework?
body: <p>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:</p>
  
  <pre><code>if 1  =&gt; 1 2 3 ... 15(last page)
  if 2  =&gt; 1 2 3 ...15
  if 3  =&gt; 1 2 3 4 ... 15
  if 4  =&gt; 1...3 4 5...15
  if 15 =&gt;1...13 14 15
  if 14=&gt;1... 13 14 15
  if 13 =&gt; 1 ... 12 13 14 15
  if 12 =&gt; 1 ... 11 12 13 ... 15
  </code></pre>
  
  <p>I tried to concat dots in string but it keeps giving me error.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let start = 1;
  let limit = 1;
  
  function getUrl() {
    return 'https://reqres.in/api/users?page=' + start + '&amp;per_page=' + limit;
  }
  
  function getData(url) {
    fetch(url)
      .then(response =&gt; response.json())
      .then(data =&gt; loadDataIntoTable(data))
      .catch(err =&gt; console.log(err));
  }
  
  function loadDataIntoTable(data) {
    let id = [];
    let email = [];
    let firstName = [];
    let lastName = [];
    let avatar = [];
    data['data'].forEach((pagi) =&gt; {
      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 &lt; email.length; i++) {
      html += "&lt;tr&gt;";
      html += "&lt;td&gt;" + id[i] + "&lt;/td&gt;";
      html += "&lt;td&gt;" + email[i] + "&lt;/td&gt;";
      html += "&lt;td&gt;" + firstName[i] + "&lt;/td&gt;";
      html += "&lt;td&gt;" + lastName[i] + "&lt;/td&gt;";
      html += "&lt;td&gt;&lt;img alt='' src=" + avatar[i] + "&gt;&lt;/td&gt;";
      html += "&lt;/tr&gt;";
    }
  
    tableBody.innerHTML = html;
  
  }
  
  function init() {
    const url = getUrl();
    getData(url);
  
  }
  
  init();
  
  totalcount = 12;
  
  
  
  var i;
  var text = "";
  for (i = 1; i &lt;= 12; i++) {
    text += "&lt;button  onclick=\"handlevent(" + i + ")\"&gt;" + (i) + "&lt;/button&gt;";
  }
  document.getElementById("page").innerHTML = text;
  
  function page(prev, dotted, next) {
    if (prev) {
      if (start &gt; 1) {
        start--;
      }
      url = getUrl();
      getData(url);
    }
    if (dotted) {
      console.log("dotted");
    }
    if (next) {
      if (start &lt; totalcount) {
        start++;
      }
      url = getUrl();
      getData(url);
    }
  }
  
  
  
  function handlevent(value) {
    start = value;
    url = getUrl();
    getData(url);
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;button id="left" onclick="page('prev','','')" class="disable"&gt;Prev&lt;/button&gt;
      &lt;/li&gt;
      &lt;li id="page" onclick="page('','dots','')"&gt;&lt;/li&gt;
      &lt;li id="pagination"&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;button id="right" onclick="page('','','next')"&gt;Next&lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The output which I am getting is like 1  2  3  4  5  6  7  8  9  10  11  12 </p>
  
  <p>but I want:</p>
  
  <pre><code>if 1 =&gt; 1 2 3 ... 15(last page) if 2 =&gt; 1 2 3 ...15 if 3 =&gt; 1 2 3 
  4 ... 15 if 4 =&gt; 1...3 4 5...15 if 15 =&gt;1...13 14 15 if 14=&gt;1... 
  13 14 15 if 13 =&gt; 1 ... 12 13 14 15 if 12 =&gt; 1 ... 11 12 13 ... 15
  </code></pre>