Я пытаюсь смешать входной фильтр выбора и входной фильтр в одном и том же заголовке.
Я создал второй заголовок, в который я поместил все входные данные фильтра. Я поставил здесь daterangepicker и входной фильтр.
Моя проблема в том, что я не могу найти способ установить входной фильтр выбора в той же строке. (вы можете видеть, что выбор ввода остается в первом заголовке, я хочу, чтобы они были с другим входным фильтром во втором заголовке).
Мне нужна помощь !
см. мой код здесь (это может быть некрасиво, но я работаю до сих пор...):
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;
////////// Filter search date on column 6
//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 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();
});
////////// Filter search input date on column 6
//instantiate datepicker and choose your format of the dates
$('#reportrange2').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 prochain': [moment().add(1, 'month').startOf('month'), moment().add(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 2
$('#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 filter input to column 3,4,5 second Header .filter 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();
} );
} );
////////// Setup - add a filter select input to column 0,2
$('#table_id').DataTable( {
initComplete: function () {
this.api().columns([0,2]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
ИЗМЕНИТЬ
Я редактировал свой JSFIDDLE только с помощью текстового поиска inut и выбора поиска ввода. выбор работает, но, к сожалению, не ввод текста...
