html - 如何在laravel中实现html表与mysql数据的排序功能？

Question

我目前正在尝试弄清楚如何为显示在 html 表中的 mysql 数据实现排序功能。我已经有了实现此目的所需的查询，但我想知道当用户单击特定列时如何在每个查询之间实现和切换。我正在使用 Laravel 构建这个项目，因此我的数据是通过 Controller 检索和压缩的。这是该 Controller 和我需要的查询:

class StatController extends Controller
{
    public function index() 
    {

    //$stats = Stat::all();

    $stats = Stat::orderBy('goals', 'DESC')->get();

    //$stats = Stat::orderBy('goals', 'ASC')->get();

    //$stats = Stat::orderBy('assists', 'ASC')->get();

    //$stats = Stat::orderBy('assists', 'DESC')->get();

    return view('stats.index', compact('stats'));

    }
}

这是我的 stats.index View 中的 HTML 表格:

<div class="all_tables stats_table table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Goals</th>
              <th>Assists</th>
            </tr>
          </thead>
          <tbody>

          @foreach ($stats as $stat)

            <?php

              $player = App\Player::find($stat->player_id);

            ?>

            <tr>
              <td>{{ $player->number }}</td>
              <td><a href="/players/{{ $player->id }}">{{ $player->fn }} {{ $player->ln }}</a></td>
              <td>{{ $stat->goals }}</td>
              <td>{{ $stat->assists }}</td>
            </tr>

          @endforeach

          </tbody>
        </table>
      </div>

如何让目标和助攻列在用户点击时可排序？

Answer 1

在JQuery中使用DataTable插件，您只需要使用here中的datatable js文件即可

你的表格应该是这样的:

<table id="myTable">
    <thead>
        <tr>
              <th></th>
              ...
              ...
              <th></th>
        </tr>
   </thead>

   <tbody>
        <tr>
             <td></td>
             ...
             ...
            <td></td>
       </tr>
  </tbody>

添加js文件后，必须添加此脚本。

$(document).ready(function(){
   $('#myTable').DataTable();
});