How to create A-Z listing

Question

I'm using Eclipse, with CodeIgniter. I'm trying to create an AZ search page grouped by letters of the alphabet like this one , but I can't do it with CodeIgniter.

Model:

public function listarLojas() {
    $this->db->order_by("nome_loja", "ASC");
    return $this->db->get("lojas")->result_array();
}

Controller:

$dados['lojas'] = $this->lojas_model->listarLojas();

View:

(Here is my problem, I can not make the foreach appear as in the example link: https://www.cuponomia.com.br/desconto )

https://codepen.io/anon/pen/vMjLNz

HTML:

<div class="row" >
  <div class="col mt-3">
    <h5 class="text-muted pb-3 fonte-helvetica">Our main stores in alphabetical order</h5>
    <div class="card card-personalizada">
      <h6 class="card-header crd-hr-custom border-bottom-0 text-center bg-primary text-light">
        1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W Y X Z
      </h6>
      <div class="card-body crd-bdy-custom">
        <!-- column -->
        <div class="row">
          <div class="col-lg-1">
            <span class="font30">A</span>
          </div>
          <div class="col-lg-11">
            <div class="container">
              <ul class="list-unstyled row">
                <li class="list-item col-md-3"> Test </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- column -->
        <hr>
      </div>
    </div>
    <?php 
      include 'buscar_lojas.php';
    ?>
  </div>
</div>

CSS:

body {
  background-color: #a3d5d3;
}

Answer 1

You need to give anchor tag to the letters which will link to the id of the container it needs to point.

<h6 class="card-header crd-hr-custom border-bottom-0 text-center bg-primary text-light">
        1 2 3 4 5 6 7 8 9 <a href="#A">A</a> B C D E F G H I J K L M N O P Q R S T U V W Y X Z
      </h6>

Then assign the id to each column according to the letters.

    <!-- column -->
    <div class="row" id="A">
      <div class="col-lg-1">
        <span class="font30">A</span>
      </div>
      <div class="col-lg-11">
        <div class="container">
          <ul class="list-unstyled row">
            <li class="list-item col-md-3"> Test </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- column -->

Hope this might answer your question.

Answer 2

Try like this

$lastChar = '';
foreach ($dados['lojas'] as $row){
    $char2 = str_split($row->name); 
    $char = $char2[0];
    if ($char !== $lastChar) {
        if(empty($last_char)){
            $skill_data .= '<li><h3>'.strtoupper($char).'</h3></li>';
        }
        $lastChar = $char;
    }
    $skill_data .= '<li>'.$row->name.'</li>';
}

This will look like this

<li>A</li>
   <li>About Home</li>
   <li>Absolut Leather</li>
   <li>A Esportiva</li>
   ...
<li>B</li>
   <li>B2 Smile</li>
   <li>Balaroti</li>
   <li>Barceló Hotels & Resorts</li>
....

Assume $row->name is the category name getting from an array of objects

Note:- CSS magic will be required to make according to your requirement