Add Row of Inputs to Match Datatypes

Add Row of Inputs to Match Datatypes

rhythmicdevilrhythmicdevil Posts: 10Questions: 0Answers: 0
edited February 2012 in DataTables 1.9
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

Replies

  • rhythmicdevilrhythmicdevil Posts: 10Questions: 0Answers: 0
    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]
  • rhythmicdevilrhythmicdevil Posts: 10Questions: 0Answers: 0
    edited February 2012
    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]
This discussion has been closed.