

現在Laravelで進めるプロジェクトで、DBから取得したリストをビューに表示する機能を作っています。

*作業環境   
php8.2.0  
Laravel10.20.0  
MAMP

ここで使われるリストをカラムごとにソートする機能を作りたく、LaravelのパッケージであるColumnn
Sortaleというライブラリをインストールしました。

行頭のカラム名を押下することでソートを実行する機能は実装できたのですが、今回は行頭に設置したそれぞれの昇順・降順ボタンを押すことをトリガーにソートを実行する機能にしたいです。（下図）

[![画像の説明をここに入力](https://i.stack.imgur.com/fxK72.jpg)](https://i.stack.imgur.com/fxK72.jpg)

公式のREADMEなどを確認しましたが方法が特定できません。  
<https://github.com/Kyslik/column-sortable/blob/master/README.md>

おそらくボタンに使用しているカラムをcolumnsortable.php（下記）にて設定することで実現できるのではないかと予測していますが、具体的な方法をご存知の方がいらっしゃいましたら是非ご教示ください。

[code]

    return [
    
    /*
    spec columns
    */
    'columns'                       => [
        'alpha'   => [
            'rows'  => ['description', 'email', 'name', 'slug'],
            'class' => 'fa fa-sort-alpha',
        ],
        'amount'  => [
            'rows'  => ['amount', 'price'],
            'class' => 'fa fa-sort-amount',
        ],
        'numeric' => [
            'rows'  => ['created_at', 'updated_at', 'level', 'id', 'phone_number'],
            'class' => 'fa fa-sort-numeric',
        ],
    ],
    
    /*
    whether icons should be enabled
     */
    'enable_icons'                  => true,
    
    /*
    defines icon set to use when sorted data is none above (alpha nor amount nor numeric)
     */
    'default_icon_set'              => 'fa fa-sort',
    
    /*
    icon that shows when generating sortable link while column is not sorted
     */
    'sortable_icon'                 => 'fa fa-sort',
    
    /*
    generated icon is clickable non-clickable (default)
     */
    'clickable_icon'                => false,
    
    /*
    icon and text separator (any string)
    in case of 'clickable_icon' => true; separator creates possibility to style icon and anchor-text properly
     */
    'icon_text_separator'           => ' ',
    
    /*
    suffix class that is appended when ascending direction is applied
     */
    'asc_suffix'                    => '-asc',
    
    /*
    suffix class that is appended when descending direction is applied
     */
    'desc_suffix'                   => '-desc',
    
    /*
    default anchor class, if value is null none is added
     */
    'anchor_class'                  => null,
    
    /*
    default active anchor class, if value is null none is added
     */
    'active_anchor_class'           => null,
    
    /*
    default sort direction anchor class, if value is null none is added
     */
    'direction_anchor_class_prefix' => null,
    
    /*
    relation - column separator ex: detail.phone_number means relation "detail" and column "phone_number"
     */
    'uri_relation_column_separator' => '.',
    
    /*
    formatting function applied to name of column, use null to turn formatting off
     */
    'formatting_function'           => 'ucfirst',
    
    /*
    apply formatting function to custom titles as well as column names
     */
    'format_custom_titles'          => true,
    
    /*
    inject title parameter in query strings, use null to turn injection off
    example: 'inject_title' => 't' will result in ..user/?t="formatted title of sorted column"
     */
    'inject_title_as'               => null,
    
    /*
    allow request modification, when default sorting is set but is not in URI (first load)
     */
    'allow_request_modification'    => true,
    
    /*
    default direction for: $user->sortable('id') usage
     */
    'default_direction'             => 'asc',
    
    /*
    default direction for non-sorted columns
     */
    'default_direction_unsorted'    => 'asc',
    
    /*
    use the first defined sortable column (Model::$sortable) as default
    also applies if sorting parameters are invalid for example: 'sort' => 'name', 'direction' => ''
     */
    'default_first_column'          => false,
    
    /*
    join type: join vs leftJoin (default leftJoin)
    for more information see https://github.com/Kyslik/column-sortable/issues/59
    */
    'join_type'                     => 'leftJoin',
    ];
    
[/code]

※下記は実装したいbladeファイルの一例（現状はカラム名にソート機能を設置済）

[code]

      <thead>
    <tr>
      <th>No.</th>
      <th>
        <div>
          <p>@sortablelink('user', 'ユーザー')</p>
          <ul class="sort-button">
            <li class="sort-button-item">
              <button type="button" class="sort-toggle-btn"><i class="sort_button_up"></i></button>
            </li>
            <li class="sort-button-item">
              <button type="button" class="sort-toggle-btn"><i class="sort_button_down"></i></button>
            </li>
          </ul>
        </div>
      </th>
      <th>
        <div>
          <p>@sortablelink('age', '年齢')</p>
          <ul class="sort-button">
            <li class="sort-button-item">
              <button type="button" class="sort-toggle-btn"><i class="sort_button_up"></i></button>
            </li>
            <li class="sort-button-item">
              <button type="button" class="sort-toggle-btn"><i class="sort_button_down"></i></button>
            </li>
          </ul>
        </div>
      </th>
    
[/code]


CC BY-SA 4.0
2023-09-29T06:34:41.827
96379
2023-09-29T07:50:07.760
2023-09-29T07:50:07.760
59611
59611
question
php laravel
Laravelで"column sortable"による並べ替えを、ヘッダー行に設置した昇順・降順のボタンで行いたい