New column + fnAddData = Issue

maximedt

Hello,

I add a new column in the DOM with that :
[code]
$("#example thead tr").append(''+concurrents2[i]+'');
$("#example tbody tr").append(''+concurrents2[i]+'');
[/code]

And then, when I'm trying to add a new line, the line is added and the content is filled for all column except the one I just added.
In the DOM, the additional are deleted right after the call of fnAddData but not the .

[code]
$('#example').dataTable().fnAddData(merged);
[/code]

I tried to use fnDraw(); before this function but it's the same deal.

Here is the DT initialization :
[code]
$('#example').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"sSearch": "Recherche : "
},
"aoColumnDefs": [
{ "sClass": "kwname", "aTargets": [ 1 ] }
],
"fnDrawCallback":function(){
$('div.dataTables_paginate')[0].style.display = "none";
$('div.dataTables_length')[0].style.display = "none";

}
} );
[/code]

Any idea ?

Thanks,
Maxime.

allan

I don't quite understand how the adding of the columns interacts with the DataTables initialisation. When does that occur? Can you link us to an example please?

Allan

maximedt

Yes, I don't think it comes from that but I thought it could be useful.

Here is the full code :
[code]
$('#kwsbulk').submit(function() {

loading = '';
var concurrents = "";
var concurrents2 = [];
var domain = $("input[name='domain']").val();
$("input[name='concurrents[]']").each(function ()
{
if($(this).val() != "")
{
if(concurrents != "")
{
concurrents = concurrents+'###'+$(this).val();
}
else
{
concurrents = $(this).val();
}
}
});

if(window.concurrents == domain+'###'+concurrents)
{

}
else
{
$(".added_column, .added_columnl").each(function () {
$(this).remove();
});
window.newcols = new Array();
if(domain != "")
{
$("#example thead tr").append(''+domain+'');
$("#example tbody tr").append(''+domain+'');
window.newcols.push(loading);
var concurrents2 = concurrents.split('###');
for (var i in concurrents2)
{
if(concurrents2[i]!="")
{
$("#example thead tr").append(''+concurrents2[i]+'');
$("#example tbody tr").append(''+concurrents2[i]+'');
}
window.newcols.push(loading);
}
window.concurrents = domain+'###'+concurrents;
}
}

var kws = $('#kws').val();
var kws = kws.split("\n");
for (var i in kws)
{
var oTable = $('#example').dataTable();
var table_to_check = new Array();
$('.kwname', oTable.fnGetNodes()).each(function(i2){
table_to_check[i2] = oTable.fnGetData(i2)[1];
});
if(kws[i]!="" && jQuery.inArray(kws[i], table_to_check) == -1)
{

var partieun = ["",kws[i],loading,loading,loading,loading,loading,loading,loading];
var merged = partieun.concat(window.newcols);
$('#example').dataTable().fnDraw();
returnd = $('#example').dataTable().fnAddData(merged);

var valsubmitkwsbulk = $('#submitkwsbulk').attr('value');
$('#submitkwsbulk').attr('disabled', 'true');
$('#submitkwsbulk').attr('value', 'Analyse en cours…');
$.ajax({
type: "POST",
url: "keyword_checker.php",
data: { keyword: kws[i], domain: domain, concurrents: concurrents }
}).done(function( msg ) {
var row = jQuery.parseJSON(msg);
$('#example').dataTable().fnDraw();
if(row && returnd)
{
oTable.fnUpdate( row, returnd[0]); // Row
}
$('#submitkwsbulk').attr('value', valsubmitkwsbulk);
$('#submitkwsbulk').removeAttr('disabled');
});

}
}

return false;
});
[/code]

Thanks

allan

I see - so you are typically adding elements to the table after it has been initialised. This FAQ is relevant: http://datatables.net/faqs#append . Anything that redraws the table (fnAddData, fnDraw, fnUpdate) will give an unexpected result if you injecting nodes.

Allan

maximedt

Thanks Allan.
So apparently, I need to use external API, I'm not sure to understand it well, do I need to use
fnVisibleToColumnIndex ?

maximedt

I fixed this by creating a function that initialize the datatable.
I call this function everytime I add columns.

Thanks for your answers Allan !