当用户点击Laravel 4中的表格标题时，如何订购你的桌子？

enter image description here

I have a table users with header : Username, Name, Email, Type, Group, Status.

Right now, I set them to be orderedBy group in my Controller Function.

I want to take this to a next level to improve my table UX.

I want to orderedBy username if the user clicked on the username on my table header.
I want to orderedBy email if the user clicked on the email on my table header... so on ..
Basically, orderedBy whatever the table header that the user click on.

If I can do this without refresh the page, that will be awesome. Do I need to know Ajax, or jQuery in order to get this done ? Is it possible to do this in php ? I am using Laravel 4.

Huge THANKS to all users that contribute in this question.

UserController.php

public function index()
    {
        //get all the users from the database
        $users = User::where('type','!=','Distributor')
        ->orderBy('group', 'asc')

        ->paginate(20);

        // return the view and give it a title 
        return View::make('users.index')
        ->with('users',$users);

    }

EDIT

My Table View

<table class="table table-hover">
    @include('sub.index.tbody') // this line is just the detail of the table.
</table>

You can easily do this with jquery Datatable no need to modify even a line of PHP Code. this is a simple example

   <!DOCTYPE html>
   <html>
   <head>
   <!-- Loading Table CSS -->
   <link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
   <!-- Loading jQuery -->
   <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
   <!-- Loading DataTable -->
   <script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
   </head>
   <body>
       <div style="width:70%; margin:0 auto;">
            <table id="example" class="display" cellspacing="0" width="100%">
               <thead>
                <!-- Your heading -->
                   <tr>
                       <th>Username</th>
                       <th>Name</th>
                       <th>Email</th>
                       <th>Type</th>
                       <th>Group</th>
                       <th>Status</th>
                   </tr>
               </thead> 
               <tbody>
                   <!-- Your data -->
                   <tr>
                       <td> some user</td>
                       <td> name here </td>
                       <td>group </td>
                       <td>status</td>
                       <td>2011/04/25</td>
                       <td>status </td>
                   </tr>
                </tbody>
            </table>
       </div>
   <script>
       $(document).ready(function() {
           // init datatable on #example table
           $('#example').DataTable();
       });
   </script>
   </body>
   </html>

Update

Integrate it with your view

   <table id="datatable" class="table table-hover">
      @include('sub.index.tbody') // this line is just the detail of the table.
   </table>
    <script>
       $(document).ready(function() {
           $('#datatable').DataTable();
       });
   </script>

assuming that you are using bootstrap include these in <head> tag

    <link rel="stylesheet" href="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.css">

    <script src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>

Try:

$users = DB::table('*tablename*')->orderBy('*columnname*', 'asc')->get();

same goes with name, email,type, group and status. You just have to specify the tablename and the columnname

EDIT:

$users = DB::table('*tablename*')->orderBy('*username*', 'asc')->get();
$users = DB::table('*tablename*')->orderBy('*name*', 'asc')->get();
$users = DB::table('*tablename*')->orderBy('*email*', 'asc')->get();
$users = DB::table('*tablename*')->orderBy('*type*', 'asc')->get();
$users = DB::table('*tablename*')->orderBy('*group*', 'asc')->get();
$users = DB::table('*tablename*')->orderBy('*status*', 'asc')->get();
return View::make('users.index')
    ->with('users',$users);

If they are not in the same table you just have to change the tablename and check if the columname used is correct

I think it is better that you handle this on the client side and use the javascript. in your code, your $users type is json array, and you can pass this to js, like

//users.index view
<script>
   var users = {{$users}}
    function sortOrderby(typeOrder)
    {
      //logic of sort
    }
</script>
<div>
   <!-- inject your js array in your HTML table 
</div>

and use this variable in your view. define actions for header clicks, and call sortOrderby function for those actions

check Sorting an array of JavaScript objects for sort