How to orderedBy your table when users click on table header in Laravel 4?

Question

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>

Hmmm · Accepted Answer · 2014-12-05T21:09:06.450

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>

Ohh wow !! I didn't know that. So, I should throw in all of this 'id="example" class="display" cellspacing="0" width="100%"` in my table tag - right ? and make sure to include, those 3 things on my head section. I will try this, as soon as it's work, I will accept your solution. :) — iori, Dec 05 '14 at 20:31
@evoque2015 because you said "should i know jQuery or ajax in order to this" so i thought that you are not familiar with jquery and i wanted to clarify what is going on :) are you unhappy with this solution ? this is the easiest way to do it, if you want i can write it the PHP way as a second method — Hmmm, Dec 05 '14 at 20:36
I `really` like this solution. Plus, I've tried it [HERE](http://codepen.io/anon/pen/ByjKra). Now, I need to integrate this in to my application. I used Laravel 4. Do you know anything about that ? BUT thank you so much for sharing this valuable tip. :) — iori, Dec 05 '14 at 20:40
@evoque2015 you need much more clarification than i thought hff just edit your question and add a snippet of your table view so i can integrate this complex stuff for you — Hmmm, Dec 05 '14 at 20:52
I already updated it. I used the Bootstrap class on my table tag. — iori, Dec 05 '14 at 20:54
I did that it's work. I don't really like the style. Can I modify this table and style it ? using CSS or JS selector ? — iori, Dec 05 '14 at 21:18
@evoque2015 yes you can just overwrite the bootstrap table design in your css — Hmmm, Dec 05 '14 at 21:21

score 2 · Answer 2 · edited May 23 '17 at 12:06

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

Natty Guurl · Answer 3 · 2014-12-05T20:36:23.820

0

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

edited Dec 05 '14 at 20:36

answered Dec 05 '14 at 20:23

Natty Guurl

125
1
3
18

Do I need to do this 5 times ? I want this to happen on my view. Can you edit the answer and be more specific. Thanks. – iori Dec 05 '14 at 20:26
Is asterisk is part of the actual syntax ? – iori Dec 05 '14 at 20:38
@evoque2015 nope. sorry about that was trying to emphasize that you have to change *tablename* and *columnname* – Natty Guurl Dec 05 '14 at 20:39
1

Nothing to sorry about. In fact, I really appreciate your concern on this. I was trying to get a precise image of your code. So which part of your code that handle - when the user click on the header table, re-orderBy the index ? I could missed. Please kindly clarify. – iori Dec 05 '14 at 20:43

How to orderedBy your table when users click on table header in Laravel 4?

3 Answers3

Update