按选择框排序

Question

我正在我的击球手表上运行查询，并希望通过使用选择选项框而不重新加载页面来对结果 A-Z 和 Z-A 以及最高分从高到低进行排序。我在解决如何让 AJAX js 与 php 一起工作并选择框有关如何执行此操作的任何想法时遇到问题，我找不到任何有用的教程。到目前为止我有这个代码：

控制器（PHP）：

    $batsmenQuery = Batsmen::where('approved', '=', 1);

   switch ($request->SortbyList){
        case 0:
            $batsmenQuery = $batsmenQuery->orderBy('name', 'DESC');
            break;
        case 1:
            $batsmenQuery = $batsmenQuery->orderBy('name', 'ASC');
            break;
        case 2:
            $batsmenQuery = $batsmenQuery->orderBy('hs', 'ASC');
            break;
        case 3:
            $batsmenQuery = $batsmenQuery->orderBy('hs', 'DESC');
            break;
            default:
                $batsmenQuery = $batsmenQuery->orderBy('name', 'DESC');


    }

    $batsmen= $batsmenQuery->paginate(40);

HTML：

        <div class="row">
            <div class="sort">
                <select name="SortbyList" id="SortBy">
                    <option value="0">A to Z</option>
                    <option value="1">Z to A</option>
                    <option value="2">Highest Score</option>
                    <option value="3">Lowest Score</option>

                </select>
            </div>
        </div>

javascript：

 $('#SortBy').on('change', function(e){

 });

关于如何使用 javascript 来切换与选择框中单击的内容相关的语句的任何想法？

Answer 1

你似乎在处理 jquery ajax 请求，看看这个例子

// Have this in your .blade.php file 
<meta name="csrf-token" content="{{ csrf_token() }}">
<script> 
  var url_variable = "{{route('your_route_name')}}";
</script>


.
.
.
$('#SortBy').on('change', function(e){
   $.ajax({
       url: url_variable,
       type: 'POST',
       dataType: 'JSON',
       data: {
           _token: $('meta[name="csrf-token"]').attr('content'),
           SortbyList : $("#SortbyList").val()
       }
   })
   .success(function (response) {
       console.log(response);
       // Now build the table as you want with javascript and replace it 

   })
   .error(function (xhr, status, response) {
       console.log(xhr.responseText);
   });
});

Answer 2

这是一个如何做你想做的事的例子，你必须根据你自己的方法改变这段代码中的一些东西。

 $('#SortBy').on('change', function(e){
     $.ajax({
               url: "new_values.php", // This is the url you make the request
               data: {SortbyList : this.value}, // Here you can send to the server the info you want in this case is only the value for the selected item 
               success: function(result){

                 if(result){
                     $("#SortBy").empty();  //This erase all the preview values 
                     var new_options = ''
                     //This loop create the new values
                     $.each(result, function(k,v){
                          new_options += '<option value="'+ v.value +'">'+  v.name +'</option>'
                     });
                     //Now we have all the values we can put on the select
                     $("#SortBy").append(new_options);
                 }

        });
 });