laravel6.0のbladeファイルで、tableヘッダをクリックしたら、そのカラムで並び替えしたかったのでtablesorterで実装してみた。

基本的には、jqueryライブラリを読み込んで、id/classで並び替えたいtable指定するだけ！
見た目は変えたくないので、tablesorterのcssは読み込まない。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>
<script>
$(document).ready(function() 
    { 
        $("#sort_table").tablesorter(); 
    } 
);
</script>

$(document).ready(function()

{

$("#sort_table").tablesorter();

}

);

</script>

意外だったのが、theadタグ・tbodyタグをちゃんと書かないと並び替えてくれない！
「動作しないので何でかな～」とサンプルと見比べながら修正したら動いた。

<table  id="sort_table" class="table table-striped table-hover">
  <thead>
    <tr>
        <th></th>
        <th>ユーザー名</th>
        <th>メールアドレス</th>
        <th>作成日時</th>
        <th></th>
    </tr>
  </thead>
  <tbody>
    @foreach($users as $user)
        <tr>
            <td>
                <form method="POST" action="{{url("admin/user/$user->id")}}">
                    @csrf
                    @method('DELETE')
                    <input type="submit" name="delete" value="削除"  class="btn btn-danger" onClick='return confirm("ユーザ名 {{ $user->name }} を削除しますか？");'>
                </form>
            </td>
            <td>
                {{$user->name}}
            </td>
            <td>
                {{$user->email}}
            </td>
            <td>
                {{ $user->created_at->format('Y/m/d H:i:s') }}
            </td>
            <td>
                <a href="{{ route('user.edit', ['user' => $user->id]) }}"  class="btn btn-info">更新</a>
            </td>
        </tr>
    @endforeach
  </tbody>
</table>

<thead>

<tr>

<th>ユーザー名</th>

<th>メールアドレス</th>

</tr>

</thead>

<tbody>

@foreach($users as $user)

<tr>

<td>

@csrf

@method('DELETE')

<input type="submit" name="delete" value="削除" class="btn btn-danger" onClick='return confirm("ユーザ名 {{ $user->name }} を削除しますか？");'>

</form>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

<a href="{{ route('user.edit', ['user' => $user->id]) }}" class="btn btn-info">更新</a>

</td>

</tr>

@endforeach

</tbody>

</table>

関連記事