Как сделать автоматическую сортировку с помощью ajax в Laravel - PullRequest
Новая
       32

Как сделать автоматическую сортировку с помощью ajax в Laravel

0 голосов
/ 08 июня 2019

Я создаю сеть, используя Laravel, я показываю свои данные из базы данных в таблицу и хочу сделать автоматическую сортировку (asc / desc), используя ajax, щелкнув заголовок таблицы, я пытался, но когда я нажимаю, ничего не происходит заголовок таблицы, Может кто-нибудь помочь мне, что не так с моим кодом, вот мой код:

Мой контроллер 

function fetch_data(Request $request){
        if($request->ajax()){
            $sort_by = $request->get('sortby');
            $sort_type = $request->get('sorttype');
            $question = DB::table('question')
->orderBy($sort_by,$sort_type)->paginate(5);
            return view('paginationquestion',compact('question'))->render();
        }
    }

Мой маршрут 

Route::get('/question/fetch_data','QuestionController@fetch_data')->name('question.fetch_data')->middleware('auth');

Мой вопрос.balade.php 

@extends('layouts.dashboard')
@section('title')
    <title>Question Manager</title>
@endsection

@section('contents')
<div class="row" style="margin-bottom:1px;">
    <div class="col-md-1" style="text-align:center;">
        <a href="{{route('question.index')}}" class="btn btn-info">question</a>
    </div>
    <div class="col-md-1" style="text-align:center;margin-left:10px;">
        <a href="{{route('answer.index')}}" class="btn btn-secondary">answer</a>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>{{'#'}}</th>
                        <th>{{'User'}}</th>
                        <th>{{'Tag'}}</th>
                        <th>{{'Status'}}</th>
                        <th>{{'Title'}}</th>
                        <th>{{'Description'}}</th>
                        <th class="sorting" data-sorting_type="asc" data-column_name="likes" style="cursor:pointer">{{'Likes'}} <span id="likes_icon"></span></th>
                        <th class="sorting" data-sorting_type="asc" data-column_name="dislikes" style="cursor:pointer">{{'Dislikes'}} <span id="dislikes_icon"></span></th>
                        <th style="width:15%;">{{'Date'}}</th>
                        <th>{{'Action'}}</th>
                    </tr>
                </thead>
                <tbody>
                    @include('paginationquestion')
                </tbody>
            </table>
            <input type="hidden" name="hidden_page" id="hidden_page" value="1"/>
            <input type="hidden" name="hiden_column_name" id="hidden_column_name" value="likes"/>
            <input type="hidden" name="hidden_sort_type" id="hidden_sort_type" value="asc"/>
             {{$questions->links()}} 
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        function fetch_data(page,sort_type,sort_by){
            $.ajax({
                url:"/question/fetch_data?page="+page+"&sortby="+
                sort_by+"&sorttype="+sort_type,

                success:function(data){
                    $('tbody').html('');
                    $('tbody').html(data);
                }
            })
        }
        $(document).on('click','.sorting',function(){
            var column_name = $(this).data('column_name');
            var order_type = $(this).data('sorting_type');
            var reverse_order = '';
            if(order_type == 'asc'){
                $(this).data('sorting_type','desc');
                reverse_order = 'desc';
                $('#'+column_name+'_icon').html('<span class="glyphicon glyphicon-triangle-bottom"></span>');
            }
            if(order_type == 'desc'){
                $(this).data('sort_type','asc');
                reverse_order = 'asc';
                $('#'+column_name+'_icon').html('<span class="glyphicon glyphicon-triangle-top"></span>');
            }
            $('#hidden_column_name').val(column_name);
            $('#hidden_sort_type').val(reverse_order);
            var page = $('#hidden_page').val();
            fetch_data(page,reverse_order,column_name);
        });

        $(document).on('click','.pagination a',function(event){
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            $('#hidden_page').val(page);
            var column_name = $('#hidden_column_name').val();
            var sort_type = $('#hidden_sort_type').val();
            fetch_data(page,sort_type,column_name);
        });
    });
</script>
@endsection
...