Laravel 5.7用Jquery升序和降序

时间:2018-11-08 17:05:17

标签: javascript jquery laravel-5.7

我是Laravel新手。在我的表中,我使用Jquery应用了实时搜索以及列的升序和降序。我正在看一些教程如何进行升序和降序,但是在此视频中,他正在使用本机PHP。

我快要完成了,我的降序工作正常,但是现在升序却有问题。

当我单击“名称”列时,将按降序排序,这是正确的,但是当我再次单击它时,我的jquery将没有任何响应

问题:为什么我的JQuery升序时不起作用?

查看

<!-- Will be used to replace the data-sort -->
<div class="table-responsive" id="staff_table">
    <table class="table table-bordered table-hover" id="table">
        <thead>
            <tr>
                <th>ID </th>
                <th><a class="column_sort" data-user="staff" data-table="staff" data-sort="desc" id="name" href="#">Name</a> </th>
                <th><a class="column_sort" data-user="staff" data-table="staff"data-sort="desc" id="username" href="#">Username</th>
                    <th><a class="column_sort" data-user="staff" data-table="staff"data-sort="desc" id="email" href="#">Email</th>
                        <th>Date Created</th>
                        <th>Time Created</th>
                        <th>Status</th>
            </tr>
        </thead>
        <tbody>
            @foreach($staffs as $staff)

            <tr>
                <td>{{ $staff->id }}</td>
                <td>{{ $staff->name }}</td>
                <td>{{ $staff->username }}</td>
                <td>{{ $staff->email}}</td>
                <td>{{ date('F m, o', strtotime($staff->created_at)) }}</td>
                <td>{{ date('H:i A', strtotime($staff->created_at)) }}</td>
                <td>{{ "TEMP" }}</td>
            </tr>

            @endforeach
        </tbody>

            </table>

        </div>

JavaScript

$(document).ready(function(){
    $('.column_sort').on('click',function () {
        var column_name = $(this).attr("id");
        var sort = $(this).data("sort");
        var user = $(this).data("user");
        var table = $(this).data("table");
        var arrow = "";
        if(sort == 'desc')
        {
            arrow = '<i class="fas fa-sort-up style=float:right;"></i>'

        }
        else
        {   
            arrow = '<i class="fas fa-sort-down style=float:right;"></i>'

        }
        $.ajax({
        type : 'get',
        url : '{{URL::to('sort')}}',
        data:{'column_name':column_name,sort:sort,user:user,table:table},
        success:function(data)
        {

            $('#staff_table').html(data);
            $('#'+column_name+'').append(arrow);
        },

        });
    // order = $(this).data("order","asc");
    });
});

控制器

public function sort(Request $request)
{

    if($request->ajax())
    {
        $output=""; 
        $sort = $request->sort;
        // Check the sort if it is desc or ascending

        if($sort == "desc")
        {
            // True it will be sort by descending
            $staffs = DB::table($request->table)
                                    ->orderBy($request->column_name, $request->sort)
                                    ->get();
            // Then re-assign the $sort to ascending
            $sort = "asc";
        }
        else
        {
            // True it will be sort by ascending
            $staffs = DB::table($request->table)
                                    ->orderBy($request->column_name, $request->sort)
                                    ->get();
            // Then re-assign the $sort to descending
            $sort = "desc";
        }
            $output .='<table class="table table-bordered table-hover" id="table">'.
                    '<thead>'.
                        '<tr>'.
                            '<th>ID </th>'.
                            '<th><a class="column_sort" data-user="'.$request->user.'" data-table="'.$request->table.'" data-sort="'.$sort.'" id="name" href="#">Name</a> </th>'.
                            '<th><a class="column_sort" data-user="'.$request->user.'" data-table="'.$request->table.'"data-sort="'.$sort.'" id="username" href="#">Username</th>'.
                            '<th><a class="column_sort" data-user="'.$request->user.'" data-table="'.$request->table.'"data-sort="'.$sort.'" id="email" href="#">Email</th>'.
                            '<th>Date Created</th>'.
                            '<th>Time Created</th>'.
                            '<th>Status</th>'.

                        '</tr>'.

                    '</thead>';

            foreach ($staffs as $key => $staff) 
            {
                $output.='<tr>'.
                '<td>'.$staff->id.'</td>'.
                '<td>'.$staff->name.'</td>'.
                '<td>'.$staff->username.'</td>'.
                '<td>'.$staff->email.'</td>'.
                '<td>'.date('F m, o', strtotime($staff->created_at)).'</td>'.
                '<td>'.date('H:i A', strtotime($staff->created_at)).'</td>'.
                '</tr>';
            }
            $output .='</table>';
            return Response($output);           
    }
}

0 个答案:

没有答案