DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

I want to update 1 column periodically after loading datatable

I want to update 1 column periodically after loading datatable

arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0
in Free community support

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

«13

Answers

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    edited November 2021

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    tbl1 is my table id

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    edited November 2021

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    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 ?

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

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

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    "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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    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 ?

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    default content reference page is giving 404

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

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

    Kevin

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0
    edited November 2021

    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 ?

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

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

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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    i'm doing these in crawlCpu function

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    I do not implement loop yet

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    line 64 is:

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

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

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

  • arsalansiddiquiarsalansiddiqui Posts: 128Questions: 15Answers: 0

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

    try this

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.