向 DataTables 中的单个 td 添加多个值？答案

【问题标题】：Adding more than one value to a single td in DataTables?向 DataTables 中的单个 td 添加多个值？
【发布时间】：2013-10-25 15:00:39
【问题描述】：

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

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

但问题是我需要来自这两个输入的值在同一个 td 中，而不是不同的 td。大致如下：

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

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

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

【问题讨论】：

标签： javascript jquery input datatables add

【解决方案1】：

您可以将名字和姓氏的值连接为传递给fnAddData 方法的第一个数组项。每个数组项代表表中的一列。

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

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

【讨论】：

哇。这比我预期的要容易得多。谢谢！

【解决方案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()
    });
});

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

【讨论】：