Initial filter value generates error

sagikazarmark

Hi,

I am using DataTables 1.9.4 with column filtering which means that on change of elements fnFilter is called. I am using the same code for all datatables.

My problem is that I would like to set initial value of input field and use it for filtering. I don't want to do use own config during initialization.

My workaround is that after setting the change listeners, I simply call an fnFilter on the datatable if the input element has a value. And here is the problem. I got 'TypeError: c is undefined' error (I use the minified version) which refers to line 3003 in not minified version. I think the problem is that the table's DOM is not ready yet, and cannot show the processing message. I think this because when I set bProcessing to falsem this error does not exists.

Here is the full code:
[code]
$('.datatables').each(function() {
var dtInstance = $(this).dataTable({
"oLanguage": {
"sUrl": base_url + "translation/datatables.json"
},
"sPaginationType": "bs_full",
"sDom": "<'panel-heading'<'pull-right'f><'pull-left'l><'pull-left'>r<'clearfix'>><'table-responsive't>p",
"bProcessing": $(this).data('source') ? true : false,
"bServerSide": $(this).data('source') ? true : false,
"sAjaxSource": $(this).data('source'),
"fnInitComplete": function(oSettings, json) {
var datatable = this;
// SEARCH - Add the placeholder for Search and Turn this into in-line form control
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
search_input.attr('placeholder', (oSettings && oSettings.oLanguage && oSettings.oLanguage.sSearchPlaceholder) ? oSettings.oLanguage.sSearchPlaceholder : 'Search all fields');
search_input.addClass('form-control input-sm');
// LENGTH - Inline-Form control
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
// length_sel.addClass('form-control input-sm');
length_sel.selectpicker().selectpicker('setStyle', 'btn-sm', 'add');
},
"fnServerData": function(sSource, aoData, fnCallback) {
$.each($(this).data(), function(index, val) {
aoData.push({'name': index, 'value': val});
});

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function(response, result, xhr) {
console.log(result);
fnCallback(response, result, xhr);
},
"timeout": 15000,
"error": function(param) {
console.log(param);
}
} );
},
});

// All select filters should be selectpickers
dtInstance.find('.filter select').selectpicker();

// Filter mechanism on filter control change
dtInstance.find('.filter').each(function() {
var inputs = $(this).find('input, select');
inputs.change(function() {
if ($(this).is('select'))
{
dtInstance.fnFilter($(this).val(), inputs.index(this));
}
else
{
dtInstance.fnFilter(this.value, inputs.index(this));
}
});
});

// Filter reset mechanism
dtInstance.find('.filter [type=reset]').click(function() {
dtInstance.find('.filter select').each(function() {
$(this).val([]).selectpicker('render');
});

dtInstance.find('.filter input').each(function() {
$(this).val('');
});

dtInstance.fnFilterClear();
});

// Initial filter values
// Generates a 'TypeError: c is undefined' which means that by the time of init filtering
// the DOM of table is not ready yet
dtInstance.find('.filter').each(function() {
var inputs = $(this).find('input, select');
inputs.each(function(index, el) {
if ($(el).val())
{
dtInstance.fnFilter($(el).val(), index);
}
});
});
});
[/code]


Can anyone help?

The main question is: Where to put this initial filter value or how?

Thanks in advance.

sagikazarmark

Hm, actually I found a ugly way to solve it:
set dtInstance.fnSettings().oFeatures.bProcessing to false and restore its value after the initial filtering is done.

But it is definitely something that I don't want to do.