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
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.
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
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.
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
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.
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.
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.
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
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.
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.
Answers
@arsalansiddiqui Your page doesn't load, but I'm not clear if you've tried what Kevin suggested in his last message.
Colin
My problem is solved, i used invalidate() instead od draw()
Thanks for your time and cooperation.
My problem is solved i used invalidate instead of draw.
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
@colin @kthorngren sir how can i change color of text or apply classess to same cell ?
Use
columns.createdCellorcreatedRowif the data doesn't change or userowCallbackif the data does change.How are you doing this?
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
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
i solved it. using parent id to add class
now i want that if any value is high than the limit the entire row jump to the top
i'm monitoring only two columns so if any values go higher in either of these column move it to top
Use the
orderoption to set the default order of the table.Kevin
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
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
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
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
You can use
rows().ids()to get all the row ids. Chain thetoArray()to get a Javascript array, for exampletbl1.rows().ids().toArray().I have a lot of tables similar to what you describe. Here is a simple one that updates every second:
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 thedataproperty 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 tablescollectionsandsummary. 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
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
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
Use
cell().node(). Thecell-selectordocs shows all the options available to select the cell. Maybe something like this:Kevin
It works, thanks
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:
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
You will need to debug your page to find out why
cellis undefined. Or post a link to a test case so we can look.Kevin
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
Your initial ajax load is returning this:
You have this in your code to show the
aobject, but its commented out:You could just use
columns.dataif 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:
You don't have any columns displaying data.
Kevin
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 worksnow 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.
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
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:
A link to your page or a test case will let us see what
element.aand 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 thecell().invalidate()docs to understand why its needed.Kevin
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 11 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.
One option is to use
column().nodes()to get thetdelements. You can use that to get thetdid.Kevin