Add Row of Inputs to Match Datatypes

rhythmicdevil

My goal is to create a new row in the data table where each field has the appropriate input type. A button would save the data to the server and then redraw the table. My initial approach was to create a hidden row that I can use as a template for the new row, but when I use jQuery to fetch the new row DataTables does not know what to do with the format. Is defining the content of the new columns in the fnAddData() function the only way to achieve a new row? I dont like the idea of having part of my table defined in HTML view and part in the fnAddData() function.

Any suggestions are appreciated.

Thanks
Steve

rhythmicdevil

This is the best that I have been able to come up with so far.

HTML
[code]



Domain
Delete



<?php foreach ($result['Botnet']['domains']['list'] as $domain): ?>

<?php echo $domain ?>


<?php endforeach; ?>



edit




Add
[/code]

Javascript
[code]
$('#botnetDomainList').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
});
$('.addRow').click(function(){
var template = new Array();
$('#botnetDomainList tfoot tr.template td').each(function(){
template.push($(this).html());
});
$('#botnetDomainList').dataTable().fnAddData(template);
});
[/code]

rhythmicdevil

A better solution

[code]



Domain
Delete



<?php foreach ($result['domains']['list'] as $domain): ?>

<?php echo $domain ?>


<?php endforeach; ?>



edit








[/code]

[code] $('table.addRows').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
});
$('.addRow').click(function(){
var tableId = $(this).closest('table').attr('id');
var template = new Array();
$('#'+tableId+' tfoot tr.template td').each(function(){
template.push($(this).html());
});
$('#'+tableId).dataTable().fnAddData(template);
});
$('table.addRows tbody').on('click', 'tr td div.deleteRow', function(){
var tableId = $(this).closest('table').attr('id');
$('#'+tableId).dataTable().fnDeleteRow($(this).closest('tr')[0]);
});[/code]