dongxing8009 2014-12-05 20:04
浏览 12
已采纳

当用户点击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>
  • 写回答

3条回答 默认 最新

  • doutangliang7769 2014-12-05 20:27
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 企业资源规划ERP沙盘模拟
  • ¥15 树莓派控制机械臂传输命令报错，显示摄像头不存在
  • ¥15 前端echarts坐标轴问题
  • ¥15 CMFCPropertyPage
  • ¥15 ad5933的I2C
  • ¥15 请问RTX4060的笔记本电脑可以训练yolov5模型吗？
  • ¥15 数学建模求思路及代码
  • ¥50 silvaco GaN HEMT有栅极场板的击穿电压仿真问题
  • ¥15 谁会P4语言啊，我想请教一下
  • ¥15 这个怎么改成直流激励源给加热电阻提供5a电流呀