How to implement sorting function for html table with mysql data in laravel?

Question

I am currently trying to figure out how I can implement a sorting feature for my mysql data being displayed in an html table. I already have the queries that I would need in order to achieve this, but I'm wondering how to now implement and switch between each of the queries when a user clicks on a particular column. I am using Laravel to build this project, so my data is being retrieved and compacted via a controller. Here is that controller and the queries I will need:

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'));

    }
}

Here is the HTML table in my stats.index view:

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

How would I go about making the goals and the assists columns sortable on a user click?

I may suggest you to use DataTables if you want something simple. — Pascal Meunier
– Pascal Meunier, Commented Jul 2, 2017 at 2:48

Sagar Gautam · Accepted Answer · 2017-07-02 02:55:53Z

2

Use DataTable plugin in JQuery, You just need to use datatable js file from here

your table should be something like this:

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

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

After adding js file, you have to add this script.

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

edited Jul 2, 2017 at 2:55

answered Jul 2, 2017 at 2:48

Sagar Gautam

9,4099 gold badges62 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

develpr Over a year ago

Awesome! Thank you!!

Sagar Gautam Over a year ago

Congrats, Glad it helped you

Ratto Over a year ago

Bad for dealing with a lot of data/records

Sagar Gautam Over a year ago

@Ratto Ajax is best option for datatable ;)

Collectives™ on Stack Overflow

How to implement sorting function for html table with mysql data in laravel?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related