Jquery UI数据表：将行添加到文本框作为列

Question

我试图添加一行到数据表没有运气的texbox和复选框作为列。我可以很容易地添加其他列，但是具有文本框和复选框的那一列对于如何做到这一点没有任何意见。文本框和复选框ID会被评估为将其类型添加到第一列值。我想知道什么是实现这一目标的好方法？我不打算克隆一个行，因为可能有我的表可能没有任何数据的情况。有任何想法吗？

下面是客户端代码：

$(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]);       
      }); 
}); 

这里的JSFiddle

Answer 1

你可以试试这个：

$(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]);       
    }); 
}); 

这里是FIDDLE。

Answer 2

您应该为此使用column rendering，而不是fnCreatedRow/createdRow。这里的如何将各种<form><input>元素的一些例子：

...  
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>' 
    }  
    } 
] 

已经使用了“老校友”匈牙利命名法，它的工作原理都与的1.9.x和1.10.x版本的数据表中。一个小的演示（在现有演示中只添加了aoColumnDefs，除了演示之外没有多少意义） - >http://jsfiddle.net/f6fqa641/