Letters with pagination inside php

Hallo everyone. I just wrote an php code for my dictionary and was wondering if I can make the letters, set alphabeticly, appear with pagination in javascript so I can see like 5 of them and not the whole list.

Here is the code. I had tried different ways but it didnt work that way. Thank you for ur time!

P.S. … I already have a CSS code written for the style …

<div class="row">
	<div class="col-sm-12">
		<div id="pagination">
			<div><a href="dictionary.php?all=<?php echo $v; ?>&language=<?php echo $language; ?>">←&nbsp;</a>
				<?php
					if($language == '' || $language == 'Английски')
						{
							$alphas = range('a', 'z');
						 }
						else if($language == 'Български')
						{
							$alphaText = 'а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ь ю я';
							$alphas = explode(" ",$alphaText);
						}
						else if($language == 'Гръцки')
						{
							$alphaText = 'α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ ς τ υ φ χ ψ ω';
							$alphas = explode(" ",$alphaText);
						}
							else if($language == 'Нидерландски')
						{
							$alphaText = 'a b c d e f g h i j k l m n o p q r s t u v w x y ij z';
							$alphas = explode(" ",$alphaText);
						}
							else if($language == 'Латински')
						{
							$alphaText = 'a b c d e f g h i k l m n o p q r s t v x y z';
							$alphas = explode(" ",$alphaText);
						}
							else if($language == 'Старобългарски')
						{
							$alphaText = 'а б в г д е ж ꙃ ꙁ і ї ꙇ и ћ к л м н о п р с т ѹ ф х ѡ ш ц ч щ ъ ꙑ ы ь ѣ ю ꙗ ѥ ꙙ ѫ ѩ ѭ ѯ ѱ ѳ ѵ';
							$alphas = explode(" ",$alphaText);
						}
						else if($language == 'Старогръцки')
						{
							$alphaText = 'α β γ δ ε ϝ ζ η θ ι κ λ μ ν ξ ο π ϻ ϙ ρ σ ς τ υ φ χ ψ ω';
							$alphas = explode(" ",$alphaText);
						}
							
				foreach($alphas as $k => $v)
				{
				?>
				<a class="word_heading <?php if($language == 'Старобългарски') { echo 'bulgarian_font'; } ?>" href="dictionary.php?alpha=<?php echo $v; ?>&language=<?php echo $language; ?>"><?php echo $v; ?></a>
				<?php
					}
				?>
		</div>
	</div>
</div>

i dont get what you want. provide input, expected output, real output.

What I want is a pagination with letters, but dont have the right Javascript code. I am using this one (see below), but it shows me numbers instead of letters. Can u modify it for this purpose? Thank you!

P.S. it looks now like this:

.

I want to have there the letters executed from the php code above and to show only the first 5 letters of the alphabet per language. If u click on next then you get to see the rest of them.

var Pagination = {
  code: '',

  Extend: function(data) {
    data = data || {};
    Pagination.size = data.size || 300;
    Pagination.page = data.page || 1;
    Pagination.step = data.step || 3;
  },

  Add: function(s, f) {
    for (var i = s; i < f; i++) {
      Pagination.code += '<a>' + i + '</a>';
    }
  },

  Last: function() {
    Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
  },

  First: function() {
    Pagination.code += '<a>1</a><i>...</i>';
  },


  Click: function() {
    Pagination.page = +this.innerHTML;
    Pagination.Start();
  },

  Prev: function() {
    Pagination.page--;
    if (Pagination.page < 1) {
      Pagination.page = 1;
    }
    Pagination.Start();
  },

  Next: function() {
    Pagination.page++;
    if (Pagination.page > Pagination.size) {
      Pagination.page = Pagination.size;
    }
    Pagination.Start();
  },

  TypePage: function() {
    Pagination.code = '<input onclick="this.setSelectionRange(0, this.value.length);this.focus();" onkeypress="if (event.keyCode == 13) { this.blur(); }" value="' + Pagination.page + '" /> &nbsp; / &nbsp; ' + Pagination.size;
    Pagination.Finish();
    var v = Pagination.e.getElementsByTagName('input')[0];
    v.click();
    v.addEventListener("blur", function(event) {

      var p = parseInt(this.value);

      if (!isNaN(parseFloat(p)) && isFinite(p)) {
        if (p > Pagination.size) {
          p = Pagination.size;
        } else if (p < 1) {
          p = 1;
        }
      } else {
        p = Pagination.page;
      }

      Pagination.Init(document.getElementById('pagination'), {
        size: Pagination.size,
        page: p,
        step: Pagination.step
      });
    }, false);
  },


  Bind: function() {
    var a = Pagination.e.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
      if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
      a[i].addEventListener('click', Pagination.Click, false);
    }
    var d = Pagination.e.getElementsByTagName('i');
    for (i = 0; i < d.length; i++) {
      d[i].addEventListener('click', Pagination.TypePage, false);
    }
  },

  Finish: function() {
    Pagination.e.innerHTML = Pagination.code;
    Pagination.code = '';
    Pagination.Bind();
  },

  Start: function() {
    if (Pagination.size < Pagination.step * 2 + 6) {
      Pagination.Add(1, Pagination.size + 1);
    } else if (Pagination.page < Pagination.step * 2 + 1) {
      Pagination.Add(1, Pagination.step * 2 + 4);
      Pagination.Last();
    } else if (Pagination.page > Pagination.size - Pagination.step * 2) {
      Pagination.First();
      Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
    } else {
      Pagination.First();
      Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
      Pagination.Last();
    }
    Pagination.Finish();
  },


  Buttons: function(e) {
    var nav = e.getElementsByTagName('a');
    nav[0].addEventListener('click', Pagination.Prev, false);
    nav[1].addEventListener('click', Pagination.Next, false);
  },

  Create: function(e) {
    var html = [
      '<a>&#9668;</a>', // previous button
      '<span></span>', // pagination container
      '<a>&#9658;</a>' // next button
    ];
    e.innerHTML = html.join('');
    Pagination.e = e.getElementsByTagName('span')[0];
    Pagination.Buttons(e);
  },

  Init: function(e, data) {
    Pagination.Extend(data);
    Pagination.Create(e);
    Pagination.Start();
  }
};

var init = function() {
  Pagination.Init(document.getElementById('pagination'), {
    size: 30, // pages size
    page: 1, // selected page
    step: 2 // pages before and after current
  });
};

document.addEventListener('DOMContentLoaded', init, false);

i won’t do that. but all you have to do is: take the index within the loop and get the value from a map with corresponding letters.

map = [1 => 'a', 2 => 'b', ...];
for(i = 1; i <= 10; i++) echo map[i];

What do you intend to do if there are more than 26 pages, using the Roman alphabet as an example? I guess you could go lower/upper case to double the range, but that seems a little confusing.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.