Question

我正在尝试通过文本输入向Datatables添加信息。通常，您使用fnAddData添加到DataTables，如下所示：

$('.home').dataTable().fnAddData([
   $("#fName").val(),
   $("#lName").val()
]);

但问题是我需要来自同一td中这两个输入的值，而不是不同的tds。有点像：

$('td:first').text($("#fName").val() + ' ' + $("#lName").val());

...我只是不知道如何正确地附加到DataTables。您可以看到我已将信息添加到表中，但这不会附加分页并且未正确添加到DataTables。有任何想法吗？提前谢谢。

http://jsfiddle.net/Z85QC/3/

Answer 1

您可以将第一个和最后一个名称的值作为传递给fnAddData方法的第一个数组项加入。每个数组项代表表中的一列。

$('#example').dataTable().fnAddData([
   $("#fName").val() + $("#lName").val(),
   $("#email").val(),
   $("#company").val() + '<br>' + $('#address').val()
]);

请在此处查看工作版：http://jsfiddle.net/Z85QC/4/

Answer 2

我可以推荐使用javascript数组的不同方法吗？

从您的示例中，HTML表格变为：

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>

你需要一些css规则

td.address
{
    white-space: pre
}

代码：

var thedata = [
    {
        name: "John Smith",
        email: "jsmith@company.com",
        address: "Company\n123 Seseme Street\nHouston, TX 77388 USA"
    },
    {
        name: "Jane Doe",
        email: "jdoe@company.com",
        address: "Company\n123 Seseme Street\nHouston, TX 77388 USA"
    }
];

var thetable = $('#example').dataTable({
    aaData: thedata,
    aoColumns: [
        { sTitle: "Name", mData: "name" },
        { sTitle: "Email", mData: "email" },
        { sTitle: "Address", mData: "address", sClass: "address"}
    ]
});

$('#addRow').click(function () {
    thetable.fnAddData({
        name: $("#fName").val() + ' ' + $("#lName").val(),
        email: $("#email").val(),
        address: $("#company").val() + '\n' + $("#address").val()
    });
});

请注意，您可以创建一个不同的对象，并为每个列使用一个渲染函数，然后使用一些数据，但是对于答案，我认为这就足够了。

在DataTables中为单个td添加多个值？

2 个答案: