Как создать листинг A-Z

Question

Я использую Eclipse с CodeIgniter.Я пытаюсь создать страницу поиска AZ, сгруппированную по буквам алфавита, например , эту , но я не могу сделать это с CodeIgniter.

Модель:

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

Контроллер:

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

Просмотр:

(Вот моя проблема, я не могу сделать foreachпоявляются, как в примере ссылки: 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

Попробуйте вот так

$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>';
}

Это будет выглядеть так

<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>
....

Предположим, $row->name - это имя категории, полученное из массива объектов

Примечание: - Магию CSS нужно будет сделать согласно вашему требованию

Answer 2

Вам необходимо присвоить тег привязки к буквам, которые будут ссылаться на идентификатор контейнера, на который он должен указывать.

<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>

Затем присвойте идентификатор каждому столбцу в соответствии с буквами.

    <!-- 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 -->

Надеюсь, что это может ответить на ваш вопрос.