title: Jquery UI Datatable: Add row to a table with textbox as column
body: <p>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?</p>
  
  <p>Here is the client side code:</p>
  
  <pre><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]);                          
            });
  });
  </code></pre>
  
  <p>Here's the <a href="http://jsfiddle.net/NpT26/52/" rel="nofollow">JSFiddle</a></p>