CODEWITHSUNDEEP
javascriptjqueryinputdatatablesaddition
triplethreat77
triplethreat77

Reputation: 1296

Adding more than one value to a single td in DataTables?

I am trying to add information to Datatables via text input. Normally, you add to DataTables with fnAddData, like so:

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

but the issue is that I need the values from both of these inputs in the same td, not different tds. Something along the lines of:

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

...I just don't know how to go about it properly to append to DataTables. You can see that I have the information adding to the table, but this does not append the pagination and isn't correctly adding to DataTables. Any ideas? Thanks in advance.

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

Upvotes: 0

Views: 319

Answers (2)

aaronps
aaronps

Reputation: 324

May I recommend a different approach using javascript arrays?

From your sample, the HTML table becomes:

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

You need some css rules

td.address
{
    white-space: pre
}

And the code:

var thedata = [
    {
        name: "John Smith",
        email: "[email protected]",
        address: "Company\n123 Seseme Street\nHouston, TX 77388 USA"
    },
    {
        name: "Jane Doe",
        email: "[email protected]",
        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()
    });
});

Note that you could create a different object and use a render function for each column mergin some data, but for an answer, I think this is enough.

Upvotes: 0

Bogdan
Bogdan

Reputation: 44526

You can join the values of the first and last name as the first array item passed to the fnAddData method. Each array item represents a column in the table.

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

See working version here: http://jsfiddle.net/Z85QC/4/

Upvotes: 1

Related Questions