2015-12-08 27 views
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

回答

0

我剛纔打了你的小提琴,我的事情你的錯誤是在這裏,所以我已經改變了這個:

'Tomorrow': [moment().add(1, 'days'), moment().add(1, 'days')], 
當然

改變了一個記錄的日期到明天:

<tr> 
<td>Approved</td> 
<td>09/12/2015</td> 
<td title="Prolongation simple">prlg. nv. ctr.</td> 
<td>Donnée 2</td> 
<td>Donnée 2</td> 
<td>Donnée 2</td> 
<td>09/12/2015</td> 
</tr> 

這是爲我工作。順便說一下,你做得很好,把所有這些放在一起。 DataTable不易實現。

+0

你好,非常感謝你的回答!對不起,但我現在有另一個問題。似乎無法搜索混合兩個日期搜索。 我已經編輯我的JSFIDDLE爲例。如果你搜索上個月創建的日期,然後下個月完成日期,它似乎並沒有工作... https://jsfiddle.net/5qknp86r/11/ – eszwal

+0

在這裏看到我的新問題http:// stackoverflow .COM /問題/ 34414504/daterangepicker與 - 數據表 - 結合 - 雙搜索欄 – eszwal