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/