從控制器傳遞數據在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> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t

是否有可能直接使用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]); 
} 

在視圖中，你會告訴它會通過將接收數據的數據表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的插件添加到初始化選項，它會jum p到相應的頁面。

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

希望它有幫助！