I want to update 1 column periodically after loading datatable

arsalansiddiqui

Hi all,
I want to update only single column via ajax. Datatable is initialized first from database then after loading all data i want to periodically update one column with another ajax source.

I've created a function and i called it after:

$(document).ready(function(){

function is simple i called a get link which gives me id and data, id is which row cell i want to update.

now the problem is how to display data where id is

kthorngren

If you are using rowId you can use row() with a row-selector with the id of the row as shown in the docs. Use row().data() to get the data, update it then use row().data() to update the table.

Kevin

arsalansiddiqui

yes i'm using rowId, but i'm lacking to implement periodically updating/replacing cells.
first data is loaded from database then ajax is called that takes some time to load.
I store ajax data into a variable with key value pairs in json

like a=id of row and b = value which i want to put into 4th column.

kthorngren

In the ajax success function use the above to get and update the row data. Here is a pseudo code example:

success: function (data) {

  var id = data.id;  // Get the id from the JSON response
  var row = table.row( '#' + id );
  var currentData = row.data();  // Get the row data using the id
  currentData.value = data.value;  // Update the row data with the response value(s)
  row.data( currentData ).draw();  // Update the table row and redraw the table

}

Se an example here:
http://live.datatables.net/gazadeto/1/edit

Kevin

arsalansiddiqui

I'm getting error:
TypeError: tbl1.row is not a function

and one thing more that, i want to loop through it, there are hundreds of cells i want to replace

arsalansiddiqui

tbl1 is my table id

kthorngren

Is the variable tbl1 within the scope of the success function? If not then use something like vat tbl1 = $('my table').DataTable(); to get an instance of the API, see this doc for more details. Also look at this FAQ.

and one thing more that, i want to loop through it, there are hundreds of cells i want to replace

You can use a standard Javascript loop of your choice for the loop. This is not Datatables specific.

You can also use the cell() API to do the same with cell().data().

Kevin

arsalansiddiqui

Now i'm getting this error, one thing more that the row i want to update is null and looks like this

{"data":null,orderable:false,searchable:false,"render":function(data,type,row,meta){ return null; }},

so how can i make it work on column 4 ?

arsalansiddiqui

And i also initialize tbl1 on top. then previous error gone.

kthorngren

"render":function(data,type,row,meta){ return null; }}

Looks like the column will always display a null value.

so how can i make it work on column 4 ?

Maybe use cell() instead of row().

Kevin

arsalansiddiqui

yes because these values are not come with database so i have to make it null.

so i have to give id to every cell ?

kthorngren

so i have to give id to every cell ?

No need. Per the cell() docs you can provide a row using row-selector (the same as the row() API) and a column-selector. So something like table.cell( '#' + id, 4 ).

yes because these values are not come with database so i have to make it null.

defaultContent is meant for situations where there is no data. Use it instead.

Kevin

arsalansiddiqui

default content reference page is giving 404

kthorngren

Sorry its columns.defaultContent. You can find all the options, api's and events in the reference page.

Kevin

arsalansiddiqui

var cell = tbl1.cell( '#row-' + cpu_array.a, 4 ); // tbl1.cell('#row-' + cpu_array.a).data(cpu_array.b); //console.log(cell);

is it correct ?

kthorngren

Don't know, does it work?

Without seeing the data and the rest of the code its hard to say if its correct. Likely you don't need the row- unless that is used as part of your original data for the id.

Please post a link to your page or a running test case showing what you have so we can offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

arsalansiddiqui

link is:
http://webapp1.galaxy.net.pk/

it shows some array data when i console.log the cell values

arsalansiddiqui

i'm doing these in crawlCpu function

kthorngren

Looks like your site is not publicly available. I get this error:

This site can’t be reachedwebapp1.galaxy.net.pk took too long to respond.

I updated my above example to show how to use cell().
http://live.datatables.net/gazadeto/2/edit

Kevin

kthorngren

My recommendation is to start by doing something like I show in the example to update one cell. Once you can do that, then writing the code to update with you loop should be much easier to figure out.

Kevin

arsalansiddiqui

Maybe, this site is hosted locally so i've changed dns entry to public ip, it will resolve in some time publicly.

I've changed my code, now i'm getting

Uncaught TypeError: Cannot read properties of undefined (reading 'draw') at (index):162

arsalansiddiqui

I do not implement loop yet

arsalansiddiqui

line 64 is:

cell.data( cpu_array.b ).draw();

kthorngren

Cannot read properties of undefined

This means something with cell.data( cpu_array.b ).draw(); is undefined. Without seeing the rest of the code its hard to say. Use the browser's debugger and set a breakpoint for this line. You should then see what is undefined.

Kevin

arsalansiddiqui

cpu_array.a and cpu_array.b is undefined.

i tried directly like:

var cell = tbl1.cell( '#row-' + 24, 4 ); cell.data( 'Updatad' ).draw();
and it does not works

arsalansiddiqui

i can see updated text in the respective column when i statically define values but it fades after drawing the table

var cell = tbl1.cell( '#row-' + 24, 4 ); cell.data( 'Updatad' ).draw();

arsalansiddiqui

i think dns is updated, can you flush dns entries and recheck ?

if you are on windows, open cmd and type ipconfig /flushdns then enter

it will resolve to ip 103.146.136.133

kthorngren

I updated the example with data: null. There doesn't seem to be a way to access this column with cell(). One option is to set the columns.data to an object name. If you set columns.default to "" for example and data: "my_data" then it will work. "my_data" can be any name that is in the original dataset or one that doesn't exist. In the example it doesn't exist.

http://live.datatables.net/gazadeto/3/edit

Kevin

arsalansiddiqui

i've already update it. but same result, row updates then data fades after redraw.

arsalansiddiqui

this is my code now:

var cell = tbl1.cell( '#row-' + cpu_array['data'][0]['a'], 4 ); //console.log(cell); console.log( cpu_array['data'][0]['b'] ); cell.data( cpu_array['data'][0]['b'] ).draw();

arsalansiddiqui

http://webapp2.galaxy.net.pk/

try this