0
我正在將datable和daterangepicker連接在一起,這並不容易!帶datatable的daterangepicker - 無法搜索未來的日期
我終於到了這一點,我幾乎高興我做了什麼!
不幸的是,我已經離開一個問題:(
我有兩列在那裏我可以搜索日期。 在第一對(列1)我在尋找過去的日期 在第二個(列6)我在尋找未來的日期
但第二個沒有工作但不能搜索未來日期
這裏是我的js代碼:!
$(document).ready(function() {
//DATATABLE
//To display datatable without search and page length select, and to still have pagination work, instantiate like so
var oTable=$('#table_id').dataTable({
"sDom":"tp",
"pageLength": 10,
"pagination":true,
// Date Sorting
columnDefs: [
{ type: 'date-eu', targets: ([1,6])}
],
//// order table onload
"order": [[ 1, 'desc' ]],
});
//DATE RANGE
//set global vars that are set by daterange picker, to be used by datatable
var startdate;
var enddate;
//instantiate datepicker and choose your format of the dates
$('#reportrange').daterangepicker({
ranges: {
"Today": [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'7 last days': [moment().subtract(6, 'days'), moment()],
'30 last days': [moment().subtract(29, 'days'), moment()],
'This month': [moment().startOf('month'), moment().endOf('month')],
'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
,
"opens": "right",
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");
});
//Filter the datatable on the datepicker apply event with reportage 1
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
startdate=picker.startDate.format('YYYY-MM-DD');
enddate=picker.endDate.format('YYYY-MM-DD');
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if(startdate!=undefined){
// 1 here is the column where my dates are.
//Convert to YYYY-MM-DD format from DD/MM/YYYY
var coldate = aData[1].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;
}
}
);
oTable.fnDraw();
});
$('#reportrange2').daterangepicker({
ranges: {
"Today": [moment(), moment()],
'Tomorrow': [moment().add(1, 'days'), moment().subtract(1, 'days')],
'7 next days': [moment().add(6, 'days'), moment()],
'Next 30 days': [moment().add(29, 'days'), moment()],
'This month': [moment().startOf('month'), moment().endOf('month')],
'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
,
"opens": "right",
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");
});
//Filter the datatable on the datepicker apply event with reportage 1
$('#reportrange2').on('apply.daterangepicker', function(ev, picker) {
startdate=picker.startDate.format('YYYY-MM-DD');
enddate=picker.endDate.format('YYYY-MM-DD');
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if(startdate!=undefined){
// 1 here is the column where my dates are.
//Convert to YYYY-MM-DD format from DD/MM/YYYY
var coldate = aData[6].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;
}
}
);
oTable.fnDraw();
});
// Setup - add a text input to Consultant/Client/candidate Header cell
$('#table_id .filters .FilterinputSearch').each(function() {
var title = $('#table_id thead .FilterinputSearch').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="recherche '+title+'" />');
});
// DataTable
var table = $('#table_id').DataTable();
// Apply the search
table.columns([3,4,5]).eq(0).each(function (colIdx) {
$('input', $('.filters th')[colIdx]).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
這裏是我的JSFIDDLE:JSFIDDLE
也許這是我看不見的東西,因爲我是一個真正的JS Noob! :d
你好,非常感謝你的回答!對不起,但我現在有另一個問題。似乎無法搜索混合兩個日期搜索。 我已經編輯我的JSFIDDLE爲例。如果你搜索上個月創建的日期,然後下個月完成日期,它似乎並沒有工作... https://jsfiddle.net/5qknp86r/11/ – eszwal
在這裏看到我的新問題http:// stackoverflow .COM /問題/ 34414504/daterangepicker與 - 數據表 - 結合 - 雙搜索欄 – eszwal