我正在使用bootstrap“daterangepicker”for datatable,它根据今天,昨天,所有日期过滤表。 最初,数据库中的所有行都被加载到数据表中。
我最初不需要从数据库加载所有行。而是首先加载今天的数据和
如果我昨天点击它应该从数据库加载昨天的数据,而不是从数据表中过滤昨天的数据。
我的代码如下:
$(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>
是否可以直接从数据库中使用daterangepicker过滤数据表。
答案 0 :(得分:0)
在您的控制器中,您将创建一个方法,将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);
}
希望它有所帮助!!