jQuery UI数据表：将行添加到以文本框为列的表中

Question

I am trying to add a row to a datatable with no luck with the texbox and checkbox as columns. I am able to add the other columns easily but the one with textbox and checkbox don't have any idea on how to do that. The textbox and checkbox ids are evaluated appending their type with first column value. I am wondering what will be good way to achieve this? I'm not looking to clone a row since there may be scenarios where my table may not have any data. Any ideas?

Here is the client side code:

$(function () {
    var tableOpts = {
        "sPaginationType": "full_numbers",
        "sScrollY": "150px",
        "bFilter": false,
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).attr('id', aData[0]);          

            var txtBox = $(nRow).find("input[type=text]");   
            txtBox.attr('id', 'text-' + aData[0]);

            var checkBox = $(nRow).find("input[type=checkbox]");            
            checkBox.attr('id', 'check-' + aData[0]);
        }
    }   
    var table1 = $('#table1').dataTable(tableOpts);        
    $('#divButton').find('.toggle').on('click', function () {                 
         table1.fnAddData([4, 'Windows 7',7.1]);                          
          });
});

Here's the JSFiddle

Answer 1

You can try this:

$(function () {
    var tableOpts = {
        "sPaginationType": "full_numbers",
        "sScrollY": "150px",
        "bFilter": false,
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).attr('id', aData[0]);          

            var txtBox = $(nRow).find("input[type=text]");   
            txtBox.attr('id', 'text-' + aData[0]);

            var checkBox = $(nRow).find("input[type=checkbox]");            
            checkBox.attr('id', 'check-' + aData[0]);
        }
    }   
    var table1 = $('#table1').dataTable(tableOpts); 
    var textbox = '<input type="text" class="txtBox">';
    var checkbox = '<input type="checkbox">';
    $('#divButton').find('.toggle').on('click', function () {                 
       table1.fnAddData([table1.fnSettings().fnRecordsTotal() + 1, 'Windows 7',7.1, textbox, checkbox]);                          
    });
});

Here is the FIDDLE .

Answer 2

You should use column rendering for this, not fnCreatedRow / createdRow . Here some examples of how to insert various <form> <input> elements :

...    
aoColumnDefs : [
   { aTargets : [1],
     mRender : function(data, type, full) {
        return '<input type="text" value="'+data+'"/>'
     }    
   },
   { aTargets : [2],
     mRender : function(data, type, full) {
        return '<input type="checkbox" checked="checked"/>'
     }    
   },
   { aTargets : [3],
     mRender : function(data, type, full) {
        return '<textarea>'+data+'</textarea>'
     }    
   }
]

have used the "oldschool" hungarian notation, it works both with 1.9.x and 1.10.x versions of datatables. A small demo (just added aoColumnDefs to an existing demo, it does not give any much sense besides the demonstration) -> http://jsfiddle.net/f6fqa641/