php - How to orderedBy your table when users click on table header in Laravel 4? -
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 onusername
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
Post a Comment