Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all articles
Browse latest Browse all 1816

DataTables individual column filtering example (using select menus) problem

$
0
0
Hi, everybody.
I'm playing a little bit with DataTables (great stuff) with server-side processing.
Basic usage is working fine.
I tried to add column filtering using select menus (https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html)
but still with data coming from a server

this is my code

the data format as returned in getColumnData is as follows : [{"valeur":"10"},{"valeur":"5"},{"valeur":"4"}]

function getColumnData( iColumn) {
var asResultData = new Array();
$.getJSON('scripts/createSelect.php',{ "colNumber": iColumn },function (data,textStatus,jqXHR) {
$(data).each(function(key,value) {
asResultData.push(value.valeur);
});
});
return asResultData;
};

function fnCreateSelect( iColumn ) {
var asResultData = getColumnData(iColumn);
// alert("Test"); // works on if I put this effective. if in comment drop-down are not populated
var r='<select><option value=""></option>', i, iLen=asResultData.length;
for ( i=0 ; i<iLen ; i++ )
{
r += '<option value="'+asResultData[i]+'">'+asResultData[i]+'</option>';
}
return r+'</select>';
}

$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#visiteurs').dataTable( {
'bProcessing':true,
'bServerSide':true,
"sAjaxSource": 'scripts/get_visiteurs.php',
"oLanguage": {
"sUrl": "js/international/<? echo $texte['datatable_lang'] ?>", // value of $texte['datatable_lang'] is either fr, en, de ,nl
"sSearch": "Recherche sur l'année : ", // this does nothing
"sProcessing": "Recheche en cour..." // same as above
},
});

/* Add a select menu for each TH element in the table footer */
$("tfoot th:not(:eq(0))").each( function ( i ) {
var columnIndex = i ;
this.innerHTML = fnCreateSelect( columnIndex );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
});
});
});


I know it is probably a bit messy but I've been trying so much to get thing working. This one works.

Note the use of the "alert" function. If I don't use it my drop down boxes are not populated.
Does anybody has any clue on how I could get rid of this alert box and still get my drop-down filled wit data??

Viewing all articles
Browse latest Browse all 1816

Trending Articles