Jquery DataTables - Change Data in Specific Cell Based on Row ID

Question

I'm trying to change the 5th column's table data in my Jquery DataTable, by going to the specific table row ID. By default, all of my table rows have an id of row<id number>. For example:

<tr id="row147">
  <td>147</td>
  ...

To attempt to change a specific table data cell, I tried something like this

table.row("#row" + data.job_id).data(variable).draw()

But this writes data across the entire row in each table data cell. How do I specify the table data cell within the row and just have it write in that with the DataTables API?

I tried table.row(row).column(5).data(variable).draw(), and while it isn't throwing any error, it is not updating the cell in that column. — Wes
– Wes, Commented Feb 2, 2017 at 23:41

Kblau · Accepted Answer · 2017-02-03 00:20:50Z

2

Your code should look something like this. Add the initComplete:

$(document).ready(function () {
    $("#uiDataTable").DataTable({
        "order": [[1, "asc"]],
        "pagingType": "full",
        "deferRender": true,
        "initComplete": function (settings, json) {
            $('tbody tr').each(function () {
                var nTds = $('td', this);
                var nTrs = $('tr', this);
                //row #  
                if (nTrs.context.id == "4") {
                    $(nTds[0]).text("Changing row 3 column 1");
                    //alert(sBrowser);
                }
            });
        }
    });
});

answered Feb 3, 2017 at 0:20

Kblau

234 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wes Over a year ago

Is there no way to accomplish what I am asking via the API? initComplete is an option..

Community · Accepted Answer · 2017-05-23 12:33:33Z

2

I ended up finding a solution by following this post here. Basically have to give every <td> an ID. Then I can use table.cell('#td_5_' + data.job_id).data(variable) to write in the new data to a specific cell.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Feb 3, 2017 at 2:25

Wes

7741 gold badge12 silver badges29 bronze badges

Comments

Mehul Kabaria · Accepted Answer · 2019-09-10 05:54:48Z

2

This is possible if you read through the docs on the row-selector you will notice it says:

also optionally cells() and cell()) methods provide the ability to select rows from the table

So if you go to the cell docs:

You will see the overloaded cell method:

cell( rowSelector, columnSelector, [ modifier ] )

For your case:

table.cell("#row" + data.job_id,'').data(variable).draw()

table.cell("#row" + data.job_id, column_index).data(variable).draw()

edited Sep 10, 2019 at 5:54

Mehul Kabaria

6,6524 gold badges28 silver badges53 bronze badges

answered Jun 16, 2018 at 18:22

tread

11.3k19 gold badges108 silver badges179 bronze badges

Comments

Atiq Baqi · Accepted Answer · 2019-08-25 05:13:22Z

1

datatables's cell method wont work when you change the order, because the rowIndex, is the order in which the row was loaded, not the order it is currently displayed like here . If you want it based on the current position in the table, it's probably easiest to use jQuery using row index -

$('#yourTableId tbody tr:eq(rowIndex) td:eq(columnIndex)').text('yourvalue');

edited Aug 25, 2019 at 5:13

answered Aug 24, 2019 at 9:53

Atiq Baqi

6721 gold badge8 silver badges16 bronze badges

Comments

Dave Cousineau · Accepted Answer · 2017-02-03 05:25:19Z

-1

var rowId = "row" + data.job_id;
var element = document.getElementById(rowId).cells;
element[index_of_column].innerHTML = "New content";`

edited Feb 3, 2017 at 5:25

Dave Cousineau

13.4k8 gold badges70 silver badges83 bronze badges

answered Feb 2, 2017 at 23:21

Blake Winchester

1

1 Comment

Wes Over a year ago

I should have rephrased my question on how it is done via the DataTables API.

Fawad Ali · Accepted Answer · 2018-02-23 02:25:45Z

-1

$('#'+table).find('tr#'+rowId).find('td:eq(colNum)').html(newValue);

answered Feb 23, 2018 at 2:25

Fawad Ali

6227 silver badges12 bronze badges

1 Comment

Derek Brown Over a year ago

Your answer was flagged as low quality because it lacks an explanation. Expand upon your answer, so that it is not deleted.

Collectives™ on Stack Overflow

Jquery DataTables - Change Data in Specific Cell Based on Row ID

6 Answers 6

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related