How to update all data in jQuery.dataTables with client-side data? - javascript

I've been fruitlessly been trying to get jQuery.dataTables to allow me to update the data in the table using Javascript. I know this has been discussed on SO before, but I haven't been able to make any of the solutions I've seen work.
I have a parameter called data that represents the data to display in the table. It is passed into a function.
I would have thought that the way to update the data would be like this:
// I checked that the new data is returned by $table.data() afterwards
$table.data(data);
// Now that the data is updated, redraw the table.
$table.fnDraw();
Nothing seems to happen when the above code runs. What am I doing wrong?
I have no trouble using fnUpdate to update the data in individual rows, so I find this particularly perplexing.
Update: After giving this some more careful research, I found that I can almost achieve the desired result by doing the following:
$table.fnClearTable();
$table.fnAddData(data);
$table.fnDraw();
However, the problem with the above is that the user loses his place in the pagination and has to navigate back to the page he was on.

Well this was the issue i faced back then Allan suggestion worked high time for me.
Try this :
Using the new API you would call draw() with the parameter false. In the old API you would use fnDraw likewise (and also in fnAddData use the parameters to not redraw).
Let me know just in case .

Related

How should we handle data sorting in websocket api?

We have a page built in ReactNative, which is showing live data using Websockets based api. We want to give option to sort the data depending upon the user selected field.
How should we do the data sorting ?
I could probably get these two approaches -
Whenever user clicks on some specific field in app screen, we will simply put the sorting key & value in array. The very next time we will get the data throuogh websocket, it will check whether that array is having value, if yes, it will simply sort the received data at client side & show it on frontend. This will simply add one more step before showing data in app.
In this approach, we will simply append the applied sort field & value in web socket request url, and then sorting will be completely handled by websocket api developer.
Please let me know which approach we should be going for ?
Before using any of the above approaches, we will need to answers for below questions -
How frequently data is getting updated ?
How much data is api returning ?
If data is being updated very frequently, then we should be going with 2nd approach.
If api is returning very big amount of data, then we should be going with 2nd approach.
The combined answers will also effect the decesion.
I am open for suggestions.
Thanks

JqGrid update data from server

We are using jgGrid and it works perfectly fine. Let me explain how the grid is setup, we are fetching json data from server, loadonce: true.
Now we want to update the grid every 20 seconds, so
setInterval(function () {
$("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid', [{ current: true }]);
}, 20000);
This is working fine. Issue is that, it entirely refreshes the grid, we want to update the data which is changed. I mean if there is change in only one cell of a column, only that cell should be changed.
Having entire grid refresh is causing issue on sorting and search filter. It replaces everything after 20 seconds.
Thanks in advance
The most simple way to solve your problem would be the usage of beforeProcessing callback which returns false if the data are not changed. It will prevent reloading of the grid in case if the data returned from the server are unchanged (compared with the previous response). I described the scenario in details in the answer. The main problem is: how to determine that the returned data are the same. In the referenced old answer I calculated MD5 cache from the data on the server side and set the value as Etag. Alternatively you can use CryptoJS to make the calculation on the client side. The 3-d parameter of beforeProcessing callback is jqXHR, which is a superset of the XMLHTTPRequest object. It contains for example responseText property, which simplifies MD5 calculation. By usage of jqXHR.getResponseHeader("ETag") you have access to the ETag HTTP header.
Reloading of the whole grid makes typically no performance problems. It's important, that modification of one cell of the grid follows to reflow or probably changing position of another elements on the page. Reloading of the whole grid is implemented as one assigning of <tbody> of the grid (if you use fill the grid correctly and if you use gridview: true option). It seems to many additional work, but it could be more quickly on the practice as sequential changing of multiple cells in multiple rows of the grid.
In any way I'd recommend you to start with implementing beforeProcessing callback, which returns false in case of unchanged server data. Only if you would have some real performance problem then you should analyse the performance problem detailed, and probably make more deep changes in your existing code.

Updating Dojo store data on client end

I have a data grid which is bound to a ItemFileReadStore. In my case, I have a "prioritize" column to shift the rows up-down as per user's selection. The prioritization order is stored in DB table. Currently I have achieved it by sending AJAX request on each Up-Down arrow click and getting the updated data in JSON object and reloading the entire data in the data grid.
But I think that's too much of data carrying. what I am looking for is: after updating the data in DB, if the update was successful, I would just pass a success flag to the calling JS method and I would update the data locally in the store at client side. That would make the response faster and will take less network load.
I know it can be done in ExtJS (http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Record-set) but not sure how to get in Dojo. I went through the documentation but could not find anything helpful.
Can anyone please guide me thought this?
It would be much easier to answer if you define what is your resource behind.
I had an exact problem and solved it with JsonRest together with dgrid.
From your question I have understood that you are sending AJAX requests to a DB and this means that you have (hopefully) a small REST API in between.
If so, I would suggest to switch from ItemFileReadStore to dojo/store/JsonRest which actually does not harm your existing data manipulation architecture but even greatly improves it.
dojo/store/JsonRest will do exactly what you are looking for and even more. Any small change in store will be handled gallantly as you mentioned, without expensive update of entire data.
Sorry if it doesn't solve your problem.

Where to render Ajax search results in an object oriented approach using Coldfusion?

I'm updating a Coldfusion8/MySql site with a fairly complex search from "spaghetti to object" (= separate view, controller and process - no framework, everything handled by Jquery Mobile).
I need to run the search query through Jquery-AJAX and am now posting the search form to my searchProcess.cfc, which does the database queries.
Question:
I'm not sure where to render the results?
The results will be fairly complex (database with a few million records, rows of 40 fields) and should end up in a single result layout or a multiple result layout file.
I was thinking of constructing the files inside the cfc and handing them back via cfsavecontent, but I'm reading everywhere this is a no-no...
What are the alternatives then?
I could set up a template_single.cfm and template_multi.cfm, pass back pure search results as AJAX response and then fire another AJAX call from the success handler to call the template and then render the output of this 2nd call. This seems awfully complicated, plus I don't see where I can fit my pagination in there without passing around large datasets.
So I'm looking for some advice on how to handle search-results in an object-oriented-way?
Thanks for input!
EDIT:
After a few more hours of googling, I'm currently looking at the following option:
1.) run a single database query to return paginated results - as per here
2.) send data with 0-25 records back to AJAX in JSON
3.) trying to use a template cf/js in a loop (length 1 or length 25) - as per here
This would mean data-transfer only for 1-25 raw records in JSON. If I try to render in the success handler, I'm not having to http-request another template.
Does this approach make sense?
First off, I see nothing wrong with putting display logic in a .cfc that is specifically for display logic. I know it's not strict MVC, but depending on what you're doing, it can work just fine. What I don't like is .cfc's that do any sort of output within the function. I always hand back any data from the function.
/end opinion
For this particular problem, I second EDIT idea of setting up the view to be almost all HTML/jQuery with AJAX calls for paginated recordsets. As far as the single/multiple results, I'd go with separate jQuery functions depending on which one you needed. The nice thing about this is that you could have the multiple recordset display call the single record display to view a single record (while still retaining the full recordset in the Dom).
In both cases, I highly recommend getting a Javascript Dump function (helps so much in visualizing the DOM data.)
PS. If anybody finds any newer/better JS Dump functions that work like cfdump, please, please, please let me know!

Load up entire table again or add row manually?

This is an ajax questions. I have a table this table shows users information at certain time depending on what settings the user sets.
Now in some cases a user will see the information right away and in some cases they won't it all depends on when they want to see the information.
Now what should I do?
Should I do? do a post and post their data and then do a ajax get after to get the table and render it?
*I probably could it all in the post but unless some huge performance gain is gained I rather not otherwise I have to do mix "success/fail" messages and the table to be rendered all in the same response.
So each one seems to have pluses and minuses.
Ajax way
don't have to worry about having a
JavaScript solution that queries the
database to figure out what their
timezone is and then determine if the
row should be added or not and any
other headaches that comes with
javascript dates.
Each row could potential have a
different style to. This would
mean I would have to possibly do a
query to the database and figure it
out or have hidden field in the page
for easy access. With Ajax way I
would not have to worry about it.
don't have to worry about making a
manual row in javascript/jquery
syntax what can be a pain to do if
you have many columns.
Javascript way
Problem less of a performance hit
since only have to potentially make
one new or do nothing. Where
otherwise I have to generate a new
table regardless and if it has lots
of rows in it that could be slow.
Have to rebind all jquery plugins
that would be on the table. Or use
jquery.live for everything else.
So I am not sure to me it seems like a hard choice.
Unless I misunderstand what you want to do, why not do both in one solution?
Return a JSON response, so, when a user logs in, you post the information using an ajax call, and just return the data from the database. I tend to return either data or an error message, but you could have two objects in your json string, one for a possible error message and the other being the data that is being returned.
The javascript then can process the data as is needed.
So, you do both, it isn't an either/or decision.

Categories