Laravel - 复选框过滤如果为空AJAX jQuery

Question

我有一个名为decay的列。在列中将有过去的日期或NULL。如果有日期，则表示物体已经离开轨道，或者物体仍在轨道中。

我想要做的是创建一个复选框，允许我筛选我的数据库，以显示轨道中的对象（列中的NULL）或衰减的对象（列中的日期）。

我已经为我的Laravel Blade文件，我的路线和页面的控制器创建了一个简单的复选框。我只需要Javascript和Controller语句的帮助来过滤它。

刀片：

<span><input type="checkbox" name="in-orbit" value="in-orbit">In Orbit</span> 
<span><input type="checkbox" name="decayed" value="decayed">Decayed</span> 

的Javascript：

$('#decayed').on('change', function() { 
    $value = $(this).val(); 
    $.ajax({ 
    type: 'get', 
    url: '{{$launchsitename->site_code}}', 
    data: { 
     'search': $value 
    }, 
    success: function(data) { 
     $('#launchsatdisplay').html(data); 
    } 
    }); 
}); 

Answer 1

试试这个：

<div> 
    <label for="search">Search:</label> 
    <input type="text" id="search" name="search"><br> 
    <label for="decayed">Decayed:</label> 
    <input type="checkbox" id="filter-for-decayed" name="decayed"><br> 
    <div id="launchsatdisplay"> 
     <!-- javascript will put the results here --> 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(function() { 
    var searchTerm = '', // keyup on #search fills this in 
     updateData = function() { 
      // called after ajax has completed successfully 
      var displayData = function (searchData) { 
       var $display = $('#launchsatdisplay'), 
        checkbox = document.getElementById ('filter-for-decayed'), 
        dataToDisplay = searchData; 

       // if the checkbox is checked then we'll filter for 
       // any items that are decayed 
       // (decayed == null means the object has NOT decayed) 
       if (checkbox.checked) { 
        dataToDisplay = dataToDisplay.filter (function (d) { 
         return d.decayed != null; 
        }); 
       } 

       // clear the display area 
       $display.html (''); 

       // insert spans that hold the raw data 
       // notice that "d" here is each data item 
       // you can get fancy with how d is displayed 
       dataToDisplay.forEach (function (d, i) { 
        $display.append (`<span>${d}</span>`); 
       }); 
      }; 

      // now to actually fetch the data from the server 
      $.ajax ({ 
       type: 'GET', 
       url: '{{$launchsitename->site_code}}', 
       data: { 'search': searchTerm } 
      }).success (function (data) { 
       displayData (data); 
      }); 
     }; 

    // called when the checkbox is changed 
    $('#filter-for-decayed').on ('change', function() { 
     updateData(); 
    }); 

    // called when the search field is typed into 
    $('#search').on ('keyup', function() { 
     searchTerm = $(this).val(); 
     updateData(); 
    }); 
}); 
</script>