Column filter disapear : Ajax DataTable

Chwal

Hello,

I'm using to dataTable with Ajax loaded data. I'm trying to implement filters on the head of my table but any time I'm using a filter a that search is made my filter's row disapear.

Here is my template:

<input type="hidden" value="'.$data['domain_id'].'" name="domain_id" id="current_dom_id" />
<div class="row-fluid">
<div class="span12">
<div class="box box-bordered box-color">
<div class="box-title">
<h3>
<i class="glyphicon-envelope"></i>
'.lang("mail_box_list").'
</h3>
</div>
<div class="box-content nopadding">                             
<table id="user_list" class="table table-hover table-nomargin dataTable table-bordered  dataTable-scroller dataTable-column_filter" data-ajax-source="./ajax_solutions.php?action=display_users" data-column_filter_types="text,text,select,text,text,null,null">
<thead>
<tr>
<th>'.lang("ndc_email").'</th>
<th>'.lang("full_name").'</th>
<th>'.lang("fcr_product").'</th>
<th>'.lang("options").'</th>
<th>'.lang("ndc_use_space").'</th>
<th>'.lang('ndc_available_space').'</th>
<th>'.ucfirst(lang('edition')).'</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

and here is action in place to implement filters:

if ($el.hasClass('dataTable-column_filter')) {
var types = $el.attr('data-column_filter_types'),
position = $el.attr('data-column_filter_position'),
if (position !== 'bottom') {
position = 'top'
}
if (types !== undefined) {
types = types.split(',');
} else {
types = [];
}
if (dateformat === undefined) {
dateformat = 'mm/dd/yy';
}
dataTable_options.initComplete = function () {
var api = this.api(),
$filter_row = $('<tr class="dataTable-col_filter"></tr>'),
$table = $(this);
// Add the filter to head or foot
if (position == 'top') {
$filter_row.appendTo($table.find('thead'));
} else {
if ($table.find('tfoot').length == 0) {
$('<tfoot></tfoot>').appendTo($table);
}
$filter_row.appendTo($table.find('tfoot'));
}
api.columns().indexes().flatten().each(function (i) {
var column = api.column(i),
$filter_col = $('<th></th>').appendTo($filter_row);
input = $('<input type="text" placeholder="' + lang['ndc_sSearch'] + '" />')
.appendTo($filter_col)
.on('keyup change', function () {
var val = $(this).val();
column
.search(val)
.draw();
});
}
var ajaxSource = $el.attr('data-ajax-source');
if(ajaxSource !== '' && ajaxSource !== undefined){
if ($el.hasClass('dataTable-tools')) {
dataTable_options.dom = 'Tfrtip';
}
dataTable_options.scrollY = "300px";
dataTable_options.deferRender = true;
dataTable_options.dom = dataTable_options.dom + 'S';
dataTable_options.ajax = ajaxSource;
var table = $el.DataTable(dataTable_options);

I guess issue is due to the draw() the reset my table without filters but I can't figure out how to get filters after the draw().

Many thanks for your help

Best regards

Chwal

Any ideas?

daniel_r

not sure why your row is being deleted but you can also try my yadcf plugin for that purpose

http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html

Chwal

Hello,
Thanks a lot for your feedback.
I'll try this and let you know if it solve the issue.

Chwal

Hello Daniel,
You plugin works absolutly fine.
Many thanks for your precious advice.

Regards