CODEWITHSUNDEEP
jquerydatatables
Wes
Wes

Reputation: 764

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

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?

Upvotes: 2

Views: 6861

Answers (6)

tread
tread

Reputation: 11098

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()

Upvotes: 2

Atiq Baqi
Atiq Baqi

Reputation: 652

's 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');

Upvotes: 1

Fawad Ali
Fawad Ali

Reputation: 612

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

Upvotes: -1

Blake Winchester
Blake Winchester

Reputation: 1

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

Upvotes: -1

Wes
Wes

Reputation: 764

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.

Upvotes: 2

Kblau
Kblau

Reputation: 23

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);
                }
            });
        }
    });
});

Upvotes: 2

Related Questions