我正在使用 Bootstrap “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>
<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>
是否可以直接使用数据库中的日期范围选择器过滤数据表。
最佳答案
在 Controller 中,您将创建一个方法,该方法将返回 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]);
}
在 View 中,您将告诉 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);
}
希望对你有帮助!!
关于mysql - 将数据从 Controller 传递到 laravel 中查看,以使用数据表中的 "daterangepicker"过滤数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45959514/