从控制器传递数据以在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);
}

希望能帮助到你！！