jquerydatatables-输入搜索和选择搜索组合在同一个thead上

我试图在同一个标题上混合选择输入过滤器和输入过滤器

我已经创建了第二个标题，在这里我放置了所有的过滤器输入。 我把daterangepicker和输入过滤器放在这里

我的问题是找不到在同一行上设置选择输入筛选器的方法。您可以看到选择输入停留在第一个标题上，我希望它们与第二个标题上的其他输入过滤器一起

我需要帮助

看到我的代码了吗？可能很难看，但我一直工作到这里…：

JS

编辑

我只使用inut文本搜索和选择input search编辑了我的JSFIDLE。 选择工作，但不幸的是不是文本输入

您需要在最后一个日期范围选择器中定义opens:left

您需要在最后一个日期范围选择器中定义opens:left

---

你好，没错！这样看起来好多了！您认为我的代码显示文本输入搜索列1、3、4、5并选择输入搜索列0、2如何？使用引导类名很好。然而，您正在征求意见，在stackoverflow中，我们只帮助解决编程问题。所有的观点都离题了，换句话说，都离题了。你看过我在第一篇文章中提到的JSFIDLE演示吗？我在初始化表时出错，而且我想合并文本输入搜索和选择输入搜索。不过我也很感激你的意见！是的，我看过你的小提琴，我编辑它来回答你。我不知道你是怎么问我的答案的；你好，没错！这样看起来好多了！您认为我的代码显示文本输入搜索列1、3、4、5并选择输入搜索列0、2如何？使用引导类名很好。然而，您正在征求意见，在stackoverflow中，我们只帮助解决编程问题。所有的观点都离题了，换句话说，都离题了。你看过我在第一篇文章中提到的JSFIDLE演示吗？我在初始化表时出错，而且我想合并文本输入搜索和选择输入搜索。不过我也很感激你的意见！是的，我看过你的小提琴，我编辑它来回答你。我不知道你是怎么问我的答案的；

$(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>' )
                } );
            } );
        }
    } );

} );

 $('#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": "left",
    format: 'DD/MM/YYYY'

},