I want to update 1 column periodically after loading datatable

colin

@arsalansiddiqui Your page doesn't load, but I'm not clear if you've tried what Kevin suggested in his last message.

Colin

arsalansiddiqui

My problem is solved, i used invalidate() instead od draw()

arsalansiddiqui

Thanks for your time and cooperation.

arsalansiddiqui

My problem is solved i used invalidate instead of draw.

arsalansiddiqui

i want to change color of text as values go higher
or i want to add class like text-danger or text-success as i calculate on server side and pass text-success or text-danger in ajax json output

arsalansiddiqui

@colin @kthorngren sir how can i change color of text or apply classess to same cell ?

kthorngren

Use columns.createdCell or createdRow if the data doesn't change or use rowCallback if the data does change.

How are you doing this?

pass text-success or text-danger in ajax json output

I would use an extra data object for each row with the classnames then in one of the callbacks above you will have easy access to it to apply the class. See this example.

Kevin

arsalansiddiqui

i tried to use rowCallback

``
"rowCallback": function( row, data ) {
/* if ( data.grade == "A" ) {
$('td:eq(4)', row).html( '<b>A</b>' );
} */

console.log(data);

},
``
but it does not update console.log

only a is fetching from database and rest of it is loaded after the table initialize. also the value changes every few seconds

arsalansiddiqui

i solved it. using parent id to add class

arsalansiddiqui

now i want that if any value is high than the limit the entire row jump to the top

arsalansiddiqui

i'm monitoring only two columns so if any values go higher in either of these column move it to top

kthorngren

Use the order option to set the default order of the table.

Kevin

arsalansiddiqui

Hi there this project is working fine but i find it to be slow and sometimes ajax do not complete roundtrip in time and other ajax starts then it hangs the ui.
In my project i load all id of my devices via database then with some delay there i call function to fill my rows line by line (first row is id, calling second row then third, fouth and so on)
now each row is taking 25 to 30 seconds to fetch then another ajax request is sent it also takes minimum 25 seconds then next ajax
because the data is coming frm devices my ajax backend is taking all id then logs into each devices get result put it in array then log into next devices and in the last it json encode them and show output.

i want to make it fast and non blocking ui, so is is possible to fill data horizontally ? so it crawls all data of device at once and fill rows ?

vertically filling data is lacking robustness of application.

my default screen when pages loads

request is trigger which fetch data every 1 minute (request is pending)

i've set a timeout of 30 seconds (in 300 seconds if it does not get data ajax request is cancelled) 30 seconds wait timeout is too much)

data is filled vertically

i want to make it faster, there is max 20 devices now but if i add more devices it exceeds 30 seconds timeout and cancel every request

kthorngren

This doesn't sound like a Datatables issue. The issue seems to be with the delay of logging into the devices to collect the information. You will need to trace through that process to see where the delays are and if there is anything that can be done to fix them.

Maybe you need to implement threads in your code that is fetching the device data.

Kevin

arsalansiddiqui

yes this is not a Datatables issue neither i'm saying it.

I want to get row id in a loop and then put data into all columns of each line

uptime_array = jQuery.parseJSON(data);
$.each(uptime_array.data, function(index, element) {
var cell = tbl1.cell( '#row-' + element.a, 5 );
cell.data( element.b ).invalidate();
});

i'm using this to put data in each cell

how do i take all row id then iterate and send ajax request only one for each row then continue the cycle after all row id finish processing ajax request

kthorngren

You can use rows().ids() to get all the row ids. Chain the toArray() to get a Javascript array, for example tbl1.rows().ids().toArray().

I have a lot of tables similar to what you describe. Here is a simple one that updates every second:

// Collection table functions
function update_collect(data) {
    var table = $('#collect').DataTable();
    table.clear();
    table.rows.add( data ).draw();
}

function do_get_collections() {
    //console.log(Date(), 'get collections');
    $.ajax({
        url: "get_collections",
        data: { }
    }).done(function (data) {
        data = JSON.parse(data);
        update_collect(data.collections);
        update_panels(data.summary);
    }).always(function () {
        if (!document[hidden]) {
            setTimeout(do_get_collections, 1000);
        }
    })
}

The update_collect() function simply clears the table and adds the new data. Instead you can iterate the rows and update the individual column like you are doing. In my case I fetch all the data at once. You could pass the row ids in the data property and have the server collect all at once and return one set of data. This would be more efficient than sending an ajax request for each row. Note that the server responds with data for two tables collections and summary. One request, lots of data.

Stack Overflow or some other resource will be better to look for techniques of how to handle fetching and processing the data. We will be happy to help with the Datatables portion of updating the data.

Kevin

arsalansiddiqui

I confused about client side manipulation so i do it in server side, now i have achieved my desired result, it is now fast and takes less than 500 ms for 1 round trip to log into each device and get data.

my next target would be websocket to minimize latency. websocket are not requirement of my project but i want to implement it to benchmark performance of xhr with websockets.

I really appreciate your effort. Thanks

arsalansiddiqui

What is the alternate of this in datatable ?

$('#row-' + element.a+' > td').eq(4).removeClass(element.e).addClass(element.d);

If i hide some column than this will add or remove class to other cell which i do not want

kthorngren

Use cell().node(). The cell-selector docs shows all the options available to select the cell. Maybe something like this:

$( tbl1.cell( '#row-' + element.a, 4 ).node() ).removeClass(element.e).addClass(element.d);

Kevin

arsalansiddiqui

It works, thanks

arsalansiddiqui

I'm getting following errors.

Then i found, https://datatables.net/plug-ins/api/fnDataUpdate and it seems it is depreciated what to do now ?

my code:

let cellFIRMWARE = tbl1.cell( '#row-' + element.a, 10 );
cellFIRMWARE.data( "" ).invalidate();
cellFIRMWARE.data( element.s ).invalidate();

arsalansiddiqui

some of data is loading majority is not loading

kthorngren

some of data is loading majority is not loading

Its hard to say what is wrong without seeing the problem. The code snippets aren't enough to understand what you have. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I'm getting following errors.

You will need to debug your page to find out why cell is undefined. Or post a link to a test case so we can look.

Kevin

arsalansiddiqui

i have given the the link in screenshot that is: https://montik.galaxy.net.pk/v9/

i can not give a test case via codepen or jsfiddle because the data is fetchin through local network and can not be called on public

kthorngren

Your initial ajax load is returning this:

{
    "draw": 1,
    "recordsTotal": 35,
    "recordsFiltered": 35,
    "data": [{
        "a": "47"
    }, {
        "a": "48"
    }, {
        "a": "49"
    },
....
      ]}
}

You have this in your code to show the a object, but its commented out:

//a->index
/* {"data":null,orderable:true,searchable:false,"render":function(data,type,row,meta){
return row.a;
}}, */

You could just use columns.data if you just want to display the object without modification. See this example.

From what I can see all of your other columns look like this:

{"defaultContent": "", orderable: false, searchable: false},`

You don't have any columns displaying data.

Kevin

arsalansiddiqui

Yes i know, that is why i reply to my old thread in which i load only id of my network devices and leave rest of the columns default.
If you recall you guide me to load that data via ajax and update the respective cells.

in this i'm calling data.php to get devices data and data is succeessfully present in network tab.

here is ajax calling function

and here is how i'm replacing cell values as instructed by you.

so previously its working by the same code now i can not figure out what is wrong with it,

i tried

in old code
cellIDENTITY.data( element.b ).invalidate(); // this works

now in https://datatables.net/plug-ins/api/fnDataUpdate as i can understand it says to add .draw()

cellIDENTITY.data( element.b ).invalidate().draw();

but it also dont work, hope i explained my issue well.

arsalansiddiqui

I've also tried to add https://cdn.datatables.net/plug-ins/1.12.1/api/fnDataUpdate.js and goes back to old datatable version but it also dosent seemt to work for me

kthorngren

I thought the link you posted was a test case showing the problem you are currently having. So I wasted my time trying to help you debug it.

The first problem might be that this is not selecting the proper cell:

let cellFIRMWARE = tbl1.cell( '#row-' + element.a, 10 );

A link to your page or a test case will let us see what element.a and what your row id's are. Without seeing these its impossible to say if this is working. For us to help we will need to see a running test case showing the issue. For this problem small code snippets and screenshots are not enough for us to help you.

As demonstrated in the example I posted in this thread you don't need .invalidate().draw(). Read the cell().invalidate() docs to understand why its needed.

Kevin

arsalansiddiqui

I have resolved the issue, here is the link https://montik.galaxy.net.pk/v11/
issue was id that is element.a is different from what is getted at initialization.

Now i have another issue that is data.php is showing by randomizing id.

SELECT * FROM routers WHERE ( api_last_sync < (NOW() - INTERVAL 1 MINUTE) OR api_last_sync IS NULL ) ORDER BY rand() LIMIT 1

1 data a time that is randomize and not crawled in 1 minute, but i dont want to do that as it is for one session only, If i open same page in another tab api_last_sync is update after every time the script finishes getting 1 device data. So if it is open on multiple screens the delay is too high and showing all records will take eternity.

So i want that get all columns id and iterate to send ajax request. Example all id are loaded at initialization then, it will send request of column1 then it show data by fetchng from ajax then it goes to second column2 and get date then so on. This way data come as linear and not normal so how many tabs will open it dont mess up with other data delay.

kthorngren

One option is to use column().nodes() to get the td elements. You can use that to get the td id.

Kevin