【Laravel】選択したセレクトボックスの値でソートして画面を切り替える

2023 10/28

2022年2月20日 2023年10月28日

選択したセレクトボックスの値で画面をソートさせたいなぁ…

こんな疑問を解決します。

解説する内容としては、

①セレクトボックスを選択する
②選択したセレクトボックスが例えば価格が低い順なら、価格が低い順にソートさせ、価格が高い順を選べば、価格が高い順にデータをソートさせる
③画面の表示

結論、セレクトボックス変更時にフォームをsubmitし、選択したセレクトボックスの値で条件分岐させればOKです。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Contents

テーブルを用意する

itemsテーブル

id	bigint unsigned auto_increment
name	string 50
price	integer
created_at	timestamp
updated_at	timestamp

マイグレーションはこんな感じで作りました。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->id();
            $table->string('name', 50);
            $table->integer('price');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('items');
    }
}

ソート条件を書く

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Item;

class ItemController extends Controller
{
    public function index(Request $request)
    {
        // セレクトボックスで選択した値
        $select = $request->price;

        // セレクトボックスの値に応じてソート
        switch ($select) {
            case '1':
                //「指定なし」はID順
                $items = Item::get();
                break;
            case '2':
                // 「価格が低い順」でソート
                $items = Item::orderBy('price', 'asc')->get();
                break;
            case '3':
                // 「価格が高い順」でソート
                $items = Item::orderBy('price', 'desc')->get();
                break;
            default :
                // デフォルトはID順
                $items = Item::get();
                break;
        }
        return view('item.index', compact('items', 'select'));
    }
}

画面側は以下のように書きます。
※jQueryを使うので、CDNを読み込みましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>セレクトボックスでソート</title>
    {{-- JQUeryをCDNで読み込む --}}
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
    <form id="form">
        <select name="price" id="price">
            <option value="1" {{ $select == '1' ? 'selected': '' }}>指定なし</option>
            <option value="2" {{ $select == '2' ? 'selected': '' }}>価格が低い順</option>
            <option value="3" {{ $select == '3' ? 'selected': '' }}>価格が高い順</option>
        </select>
    </form>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
        @foreach ($items as $item)
            <tr>
                <td>{{ $item->id }}</td>
                <td>{{ $item->name }}</td>
                <td>{{ $item->price }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
    
    <script>
        $(function() {
            $('#price').change(function () {
                $('#form').submit();
            });
        });
    </script>
</body>
</html>

「指定なし」→ID順でソートされる