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


enter image description here

i have table users header : username, name, email, type, group, status.

right now, set them orderedby group in controller function.

i want take next level improve table ux.

  • i want orderedby username if user clicked on username on table header.
  • i want orderedby email if user clicked on email on table header... on ..
  • basically, orderedby whatever table header user click on.

if can without refresh page, awesome. need know ajax, or jquery in order done ? possible in php ? using laravel 4.

huge thanks users contribute in question.

usercontroller.php

public function index()     {         //get users database         $users = user::where('type','!=','distributor')         ->orderby('group', 'asc')          ->paginate(20);          // return view , give title          return view::make('users.index')         ->with('users',$users);      } 

edit

my table view

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

you can jquery datatable no need modify line of php code. 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>                 <!-- heading -->                    <tr>                        <th>username</th>                        <th>name</th>                        <th>email</th>                        <th>type</th>                        <th>group</th>                        <th>status</th>                    </tr>                </thead>                 <tbody>                    <!-- data -->                    <tr>                        <td> 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 view

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

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

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -