具有数据表搜索功能的Daterangepicker无法工作
daterangepicker with datatable search functionality is not working
我有jQuery数据表搜索功能的问题。搜索功能不工作，这是我的代码:
$(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}
],
//// 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: {
"Aujourd'hui": [moment(), moment()],
'Hier': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Les 7 derniers jours': [moment().subtract(6, 'days'), moment()],
'Les 30 derniers jours': [moment().subtract(29, 'days'), moment()],
'Ce mois-ci': [moment().startOf('month'), moment().endOf('month')],
'Le mois dernier': [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
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
startdate=picker.startDate.format('YYYY-MM-DD');
enddate=picker.endDate.format('YYYY-MM-DD');
console.log(startdate);
oTable.fnDraw();
});
$.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[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;
}
}
);
} );<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<div class="container">
<div class="row">
<label class="col-sm-12 col-md-12"></label>
</div>
<div class="row">
<label class="col-sm-12 col-md-12">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div class="controls">
<div class="input-prepend input-group"> <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" style="width: 200px" name="reportrange" id="reportrange" class="form-control" value="">
</div>
</div>
</div>
</fieldset>
</form>
</label>
</div>
<div class="row">
<div class="table-responsive">
<table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead class="filters">
<tr>
<th>Stat.</th>
<th class="FilterinputSearch">creation</th>
<th>Col1</th>
<th class="FilterinputSearch">Col2</th>
<th class="FilterinputSearch">col3</th>
<th class="FilterinputSearch">Col4</th>
<th class="FilterinputSearch">Col5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Approved</td>
<td>08/08/2015</td>
<td title="Nouveau Contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td>prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>XTLE<span style="display: none;">New Customer</span></td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.<span style="display: none;">Nouveau contrat</span></td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/11/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>16/11/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
<tr>
<td>Approved </td>
<td>08/08/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
<td>Donnée 1</td>
</tr>
<tr>
<td>Rejected</td>
<td>15/08/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>02/10/2015</td>
<td title="Nouveau contrat">nv. ctr.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>To be reviewed</td>
<td>15/10/2015</td>
<td title="Prolongation simple">prlg. smpl.</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Approved</td>
<td>22/10/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>Donnée 2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>html和PHP代码
<table id="example" class="display table table-striped table-bordered " cellspacing="0" width="100%">
<thead>
<tr>
<th>Owner ID</th>
<th>Type</th>
<th>State</th>
<th>City</th>
<th>Locality</th>
<th>Min Price</th>
<th>Max Price</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Owner ID</th>
<th>Type</th>
<th>State</th>
<th>City</th>
<th>Locality</th>
<th>Min Price</th>
<th>Max Price</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</tfoot>
<tbody>
<?php if($projectsdate){ foreach($projectsdate as $pjdata)
{ $date = $pjdata['created']; ?>
<tr>
<td><?php echo $pjdata['ownerid'] ?></td>
<td><?php echo $pjdata['propertytype'] ?></td>
<td><?php echo $pjdata['States']['statename']?></td>
<td><?php echo $pjdata['Cities']['cityname'] ?></td>
<td><?php echo $pjdata['locality'] ?></td>
<td><?php echo $pjdata['minprice'] ?></td>
<td><?php echo $pjdata['maxprice'] ?></td>
<td><?php if($date){ echo date_format($date,"d-m-Y"); } ?></td>
<td>Approve</td>
</tr>
<?php }} ?>
</tbody>
</table>
Jquery code
-----------------
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iFini = document.getElementById('mindate').value;
var iFfin = document.getElementById('maxdate').value;
var iStartDateCol = 7;
var iEndDateCol = 7;
iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);
var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);
if ( iFini === "" && iFfin === "" )
{
return true;
}
else if ( iFini <= datofini && iFfin === "")
{
return true;
}
else if ( iFfin >= datoffin && iFini === "")
{
return true;
}
else if (iFini <= datofini && iFfin >= datoffin)
{
return true;
}
return false;
}
);
$(document).ready(function () {
$('.datepicker').datepicker({
format: "dd-mm-yyyy"
});
});
$(document).ready(function() {
var table = $('#example').DataTable();
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" class="footer" placeholder="Search '+title+'" />' );
} );
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
相关文章：
- DateRangePicker 不适用于“今天”，但可以使用其他选项
- Issue with Jquery DaterangePicker
- Dangrossman的Bootstrap-Daterangepicker日期更改事件
- Jquery Daterangepicker日期格式
- 在daterangepicker中设置值
- 在CakePHP中，Daterangepicker日期默认为零
- daterangepicker时间选择器不应用后，按应用按钮
- 具有数据表搜索功能的Daterangepicker无法工作
- DateRangePicker -结合范围选择与动态预设
- 默认情况下，今天的日期在daterangepicker中处于活动状态
- Jquery dateRangePicker -总是水平的
- 尝试实现每周DateRangePicker控件
- angular-daterangepicker.js -在range列表中包含选项"选择
- Daterangepicker for Django
- 我如何在我的 Angular 2 项目中使用 Daterangepicker JS
