Hi,
I have a problem with DataTables,
I would like to add an autocomplete with the search box, my first problem is I can't assign an ID to the search input outside of the ".datatable" (I can, but always in the 'initComplete').
My second is when I assign an ID, then I add flexdatalist and refresh the "function" of "flexdatalist", it's fonctional but when I click in the search input my cursor/focus is off, and I must re-click to can type letters but it's always focus off (the search works but not the autocomplete and my letters disapear), the both (DataTables and flexdatalist) don't work correctly together ahaha
Also everytime I click on, my page returns to the top,
Maybe a solution ?
PS : flexdatalist works when I specify the code : <input id="ac-0083" class="flexdatalist">
outside of the datatables
Thanks
` $.extend( $.fn.dataTable.defaults, {
"dom": '<"top"AfB>rt<"bottom"ip><"clear">',
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/French.json",
"decimal": ",",
"thousands": ".",
"language": {
alphabetSearch: {
alphabet: '#ABCDEFGHIJKLMNOPQRSTUVWXYZ',
infoDisplay: 'Afficher :',
infoAll: 'Tous'
}
}
},
"paging": true,
"pagingType": "full_numbers",
"ordering": true,
"searching": true,
"info": false,
"pageLength": 25,
fixedHeader: {
header: true,
footer: true
},
buttons: [
{
text: 'Réinitialiser',
action: function ( e, dt, node, config ) {
dt.search( '' ).draw();
}
}
],
initComplete: function () { //WORK
var idTable = this.attr('id'),
idDataList = $("#" + idTable ).attr('data-id-ac');
initDataList = $("#" + idTable ).attr('data-init');
if ( idDataList != 0 && initDataList != 1 )
{
$("#" + idTable + "_filter input").attr('id', idDataList ).addClass('flexdatalist');
$("#" + idTable ).attr('data-init','1');
initialiseDatalist();
}
} */
} );
$('.table-liste').DataTable( {
} );
/* $("#table-liste-0083_filter input").attr('id', 'ac-0083' ).addClass('flexdatalist');
initialiseDatalist(); */ //DOESN'T WORK
$('#table-liste-0083').DataTable( {
"pageLength": 35,
"order": [[0, 'asc']],
rowGroup: {
dataSrc: 1
},
"dom": '<"top"Bf>rt<"bottom"ip><"clear">',
alphabetSearch: {
column: 1
},
"columnDefs": [
{
"type": 'natural',
"targets": [ 0 ],
"visible": false,
"searchable": false,
"orderable": false
},
{
"targets": [ 1 ],
"visible": false,
"searchable": true,
"orderable": false
},
{
"targets": [ 2, 3 ],
"visible": true,
"searchable": true,
"orderable": false
},
{
"targets": [ 4, 5, 6, 7 ],
"visible": true,
"searchable": false,
"orderable": false
}
]
} );
function initialiseDatalist(){
var idDataList = $('.flexdatalist').attr('id');
$('.flexdatalist').attr('list', idDataList + '-datalist')
$('.flexdatalist').flexdatalist({
minLength: 2,
searchByWord: true,
searchContain: false,
maxShownResults: 5,
noResultsText: 'Aucun résultat pour "{keyword}"',
normalizeString: function (string) {
return latinize(string);
}
});
}
initialiseDatalist();`
<table id="table-liste-0083" data-id-ac="ac-0083" class="display" width="100%">
