how to create dots in pagination or breadcrumb if they are too much in number

Question

I want to create dots in breadcrumb if they exceeds some specific limit of numbers. I added script, to create breadcrumb but it's not working.

I am stuck where i have to add dots so that when bread crumb item exceeds it hides and create dots

function getBreadCrumb() {
  if (window.ActiveTab != 'local') {
    $('#fr-h-r-3 .breadcrumb.fr-breadcrumb').html('');
    return false
  }

  /*alert(window.ActiveTab);
  if(window.ActiveTab == 'fb'){
    $('#fr-h-r-3 .breadcrumb.fr-breadcrumb').html('<li><a href="javascript:void(0);" onClick="$(document).trigger(\'ImageManager.LoadBreadCrumbFolder\',[this]);" data-name="Facebook-Images" data-hist="Facebook-Images/" data-path="'+b.opts.userFolderDefaultPath+'Facebook-Images">Facebook-Images</a></li>');
    return false;
  }else if(window.ActiveTab == 'ig'){
    $('#fr-h-r-3 .breadcrumb.fr-breadcrumb').html('<li><a href="javascript:void(0);" onClick="$(document).trigger(\'ImageManager.LoadBreadCrumbFolder\',[this]);" data-name="Instagram-Images" data-hist="Instagram-Images/" data-path="'+b.opts.userFolderDefaultPath+'Instagram-Images">Instagram-Images</a></li>');
    return false
  }*/

  var currentPath = b.opts.userFolderDefaultPath;
  if (b.opts.imageManagerFolders.length > 0) {
    currentPath = b.opts.userFolderDefaultPath + b.opts.imageManagerFolders.join('/') + '/';
  }
  var sArray = currentPath.split('/');
  var fArray = currentPath.split('/');

  fArray.pop();
  fArray.shift();
  sArray.shift();
  sArray.shift();
  sArray.shift();
  sArray.pop();
  var html = '<li><a href="javascript:void(0);" onClick="$(document).trigger(\'ImageManager.LoadBreadCrumbFolder\',[this]);" data-name="#home" data-hist="" data-path="/' + fArray[0] + '/' + fArray[1] + '/"><span class="fa fa-home"></span></a></li>';

  /*console.log('sArray: '+sArray);
  console.log('fArray: '+fArray);*/

  function getPath(i) {
    var hisPath = '';
    for (var j = 2; j < (i + 3); j++) {
      if (fArray[j] != 'undefined') {
        hisPath += fArray[j] + '/';
      }
    }
    return hisPath;
  }

  if (sArray.length > 6) {
    as = 4;
    al = (sArray.length - 3)
  }
  sts = false;

  for (var i = 0; i < sArray.length; i++) {

    if ((i + 1) != sArray.length) {
      if (typeof as != 'undefined' && i == as) {
        sts = true;
      }
      if (typeof al != 'undefined' && i == al) sts = false;
      if (sts == false) {
        html += '<li><a onClick="$(document).trigger(\'ImageManager.LoadBreadCrumbFolder\',[this]);" href="javascript:void(0);" data-name="' + sArray[i] + '" data-hist="' + getPath(i) + '" data-path="/' + fArray[0] + '/' + fArray[1] + '/' + getPath(i) + '">' + sArray[i] + '</a></li>';
      }
    } else {
      html += '<li class="active">' + sArray[i] + '</li>';
    }

    //html += '<li class="active">'+sArray[i]+'</li>';
  }
  $('#fr-h-r-3 .breadcrumb.fr-breadcrumb').html(html);
}

Answer 1

Thank you for your efforts, i was working on this, i solved this by only adding this code into function.

if(typeof as != 'undefined' && i==as) { sts = true; html += '<li>...</li>'; }

where the line is

if (typeof as != 'undefined' && i == as) {
    sts = true;
  }

this script is generating a pagination you can see in script. and the final output is this. simple pagination without dots.

check
tttt
New-Folder-1
New-Folder-1
New-Folder-1

when exceeds 6 li then it creates dots. like this.

check
tttt
New-Folder-1
New-Folder-1
...
New-Folder-1
htest
tes2