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

Question

我正在尝试将没有一行的数据添加到数据表中，而texbox和checkbox作为列。 我能够轻松添加其他列，但带有文本框和复选框的列不知道如何执行此操作。 评估文本框和复选框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

您应该为此使用列渲染 ，而不是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/