将数据从控制器传递到 laravel 中的视图，以使用数据表中的“daterangepicker”过滤数据

Question

我正在为数据表使用引导程序“daterangepicker”，它根据今天、昨天、所有日期过滤表格。 最初，数据库中的所有行都被加载到数据表中。

我最初不需要从数据库中加载所有行。而是先加载今天的数据，然后
如果我点击昨天，它应该从数据库中加载昨天的数据，而不是从数据表中过滤昨天的数据。

我的代码如下：

 $(document).ready(function() {
        var oTable=$("#example").DataTable({ "bInfo": false,
            "bLengthChange": false,
            "bSort": false,
            "responsive": true,
        });

        var startdate;
        var enddate;

    $('#reportrange').daterangepicker({
            ranges: {
              

                "Today": [moment(), moment()],

                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')]

            },
        format: 'DD/MM/YYYY',

    },
    function(start, end,label) {
// Parse it to a moment
        var s = moment(start.toISOString());
        var e = moment(end.toISOString());
        startdate = s.format("YYYY-MM-DD");
        enddate = e.format("YYYY-MM-DD");
    });

    $('#reportrange').on('apply.daterangepicker', function(ev, picker) {



        startdate=picker.startDate.format('YYYY-MM-DD');
        enddate=picker.endDate.format('YYYY-MM-DD');
        oTable.draw();
    });
    $.fn.dataTableExt.afnFiltering.push(
        function( oSettings, aData, iDataIndex ) {
            if(startdate!=undefined){
// 0 here is the column where my dates are.
//Convert to YYYY-MM-DD format from DD/MM/YYYY
                var coldate = aData[2].split("/");
                var d = new Date(coldate[2], coldate[1]-1 , coldate[0]);
                var date = moment(d.toISOString());
                date =    date.format("YYYY-MM-DD");

//Remove hyphens from dates
                dateMin=startdate.replace(/-/g, "");
                dateMax=enddate.replace(/-/g, "");
                date=date.replace(/-/g, "");

console.log(dateMin, dateMax, date);

// run through cases to filter results
                if ( dateMin == "" && date <= dateMax){
                    return true;
                }
            else if ( dateMin =="" && date <= dateMax ){
                    return true;
                }
            else if ( dateMin <= date && "" == dateMax ){
                    return true;
                }
            else if ( dateMin <= date && date <= dateMax ){
                    return true;
                }

// all failed
                return false;
            }
        }
    )
        $("#example").show();
    });

<div class="input-prepend input-group" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width:auto">
                                <i class="glyphicon glyphicon-calendar fa fa-calendar one"></i>&nbsp;

                                <input type="text" style="width: 200px" name="reportrange" id="reportrange" class="form-control"  />
                                <span></span> <b class="caret"></b>
                            </div>
							
							  <table id="example" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%" style="display: none">
                                <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>User</th>
                                    <th>Created_at</th>
                                    <th>Field</th>
                                    <th>Status</th>

                                </tr>
                                </thead>
                                <tbody>
                                @foreach($auditMd5 as $md5r)
                                    <tr>
                                        <td>{{$md5r->id}}</td>
                                        <td>{{$md5r->user}}</td>
                                        <td>{{$md5r->created_at->format('d/m/Y')}}</td>
                                        <td>{{$md5r->field}}</td>
                                        <td>{{$md5r->status}}</td>


                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
							

是否可以直接从数据库中使用 daterangepicker 过滤数据表。

Answer 1

在您的控制器中，您将创建一个将 JSON 数据返回到表中的方法：

public function dt_data() {
    $auditMd5 = TableName::select('id',
        'column1',
        'column2',
        'column3',
        DB::raw('If you need explicit HTML, you will have to do it here.' AS html_element))
        ->orderBy('id')->get();

    //To the DataTable understand the data must be named 'aaData'
    return response()->json(['aaData' => $numeros]);
}

在视图中，您将告诉 DataTable 它将通过 JSON 接收数据，并将对所有信息进行分页，因此一次只绘制一页，从而节省加载时间：

<script>
    $('#datatable').DataTable({
        ajax: '{{ asset('/route_to_controller/dt_data') }}',
        dataSource: 'lista',
        columns: [
            {"data": "column1", "class": "you-can-add-class-as-parameter"},
            {"data": "column2"},
            {"data": "column3"},
            {"data": "html_element"},
        ],
        paging: true,
        responsive: true,
    )};
</script>

如果您需要跳转到特定页面，可以在初始化选项中添加page.jumpToData() DataTable 插件，它会跳转到相应的页面。

initComplete: function (settings, json) {
    table.page.jumpToData(column1, 0);
}

希望对你有帮助！！