Question

我有一个名为const resetAction = NavigationActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'User' }) ] }); this.props.navigation.dispatch(resetAction);的专栏。列中的任何一个都会有过去的日期或decay。如果有日期，则表示该对象已离开轨道，或者其NULL对象仍在轨道上。

我要做的是创建一个复选框，允许我过滤我的数据库，以显示在轨道上的对象（列中的NULL）或已经腐朽的对象（列中的日期）

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

刀片：

NULL

使用Javascript：

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

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>

Laravel - 复选框过滤如果Null AJAX jQuery

1 个答案: