Refresh Javascript Source Data

fkmbkk · November 2015

How do I do something like...

           table.data = dataSet2;
           table.data.refresh;

Thank you.

jLinux · November 2015

I believe you can just use a combo of clear(), rows.add() and draw()

Try this:

table.clear().rows.add(dataSet2).draw()

Should work just fine

fkmbkk · November 2015

JLinux,

Its not working, FYI. This datable is using deferLoading with Ajax from the server.

When I ever i call draw(), its pulling from the server.

jLinux · November 2015

So you want to switxh from ajax to local json? Or teload the json? If the latter, ajax.reload()

allan · November 2015

When I ever i call draw(), its pulling from the server.

Suggests you are using serverSide (are you? - there is no way to tell for your original post, since there is no debug trace or link to a test page, as requested in the forum rules :-) ).

If so, then all you need to do to refresh the data is call draw(). It will always make a request to the server if you have server-side processing enabled - that is the whole point of server-side processing.

Allan

fkmbkk · November 2015

This is my initialization.

  $(document).ready(function () {
           $('#example').DataTable({
               "processing": true,
               "serverSide": true,
               "deferLoading": 24,
               "ajax": {
                   "url": "api/products/GetAllProducts",
                   "type": "POST",
                   dataSrc: "data"
               },
               "columns": [
                   { "data": "Id" },
                   { "data": "Name" },
                   { "data": "Category" },
                   { "data": "Price" }
               ]
           });
       });

And I want to be able to reload the first page using javascript; and yet be able to perform paging using serverSide.

allan · November 2015

There is no option for that. If you are server-side processing mode then the data doesn't "exist" at the client-side (you see a snap shot of it only). DataTables will always request the data from the server on each draw when in server-side processing mode.

Allan

fkmbkk · November 2015

Hmm...

Can this possibly be enhanced ? Part of extension for deferLoading. For performance improvement.

allan · November 2015

I don't have any plans to add that ability to DataTables. I suspect it would be a fairly major piece of work since the concept of 'if server-side processing, then a draw will always get new data' is baked tightly in to the code.

Allan

fkmbkk · November 2015

Oh...

Cause to be truly high performance. Lets say I have 3 DataTable...and need to refresh all the data...this functionality is really important.

Any way thanks.

jLinux · November 2015

If you want to change that, then im not sure you fully understand the reason behind using serverSide

What you could do, (which isnt the best idea), is just set destroy, then re-init the while table with new settings... But thats a bad idea :)

And your topic says

Refresh Javascript Source Data

Not "Change ajax source on table using ServerSide"

So thats what I explained on my first post, even the content of your first post was very vague and misleading.

-J

fkmbkk · November 2015

jLinux thanks for your reply.

Let me try to explain, I guess this is a common scenario.

Lets say I have 3 DataTables on my entry page and multiple individual fields. I wish to retrieve and show all the data (3 DT and individual fields) using one JQuery/Ajax call.

My DT's could have many rows like maybe 10,000 per DT. So to achieve fast call; I will still need the serverSide for paging.

I hope I made myself clear here. Its very common for heavy data entry forms.

jLinux · November 2015

Just use 3 serverside scripts, or one and pass a table identifier..

Either way, if youre using ajax at all for anything, that has to be its own separate ajax request, cant combine them.

fkmbkk · November 2015

That means there will be 4 calls to my server..Which is expensive..

allan · November 2015

Yes - I see the issue. Currently the only option is to use ajax as a function and have it make the single Ajax call, queuing other requests, and execute the callbacks when the data is returned form the client-side.

The only benefit you would see is on first page load, where there would be a single Ajax call rather than 3, as the users navigate through the tables independently of each other there would be no benefit.

Allan

fkmbkk · November 2015

Thanks for the reply. Is there any sample on this ajax as a function ?

Actually there can be scenarios where it would be useful after the initial load. eg. Some rate changes that can effect all the 3 DTs; where I would need to refresh all of it.

I will try the ajax as function first.

allan · November 2015

There isn't an example showing exactly what you want, but the ajax documentation does contain an example of it being used as a function - just not for three tables. Additionally, the pipelining example uses it as a function as well.

Allan

fkmbkk · November 2015

I tried something like this..

   $('#example').DataTable({
                "ajax": function (data, callback, settings) {
                    alert (data);
                    callback (dataSet);
                }
            });

FYI dataSet is an Javascript Array.

I get this error -
Error: Unable to get value of the property 'length': object is null or undefined

allan · November 2015

We'd need a link to the page to be able to debug that. It isn't immediately obvious why it would be failing.

Allan

fkmbkk · November 2015

Try this

http://fongkoon.w13.wh-2.com/dtfunction.html

Thank you.

allan · November 2015

Ah - I understand - thanks for the link.

The issue is that the data to be returned needs to be in an object - specifically a data property should be used for the data:

            $('#example').DataTable({
                "ajax": function (data, callback, settings) {
                    callback( { data: dataSet } );
                }
            });

Why? This is so that server-side processing and return other parameters such as totalRecords, etc.

Allan

fkmbkk · November 2015

That is working...the complete object.

{"data":[{"Id":1,"Name":"Hammer","Category":"Hardware","Price":12.9},{"Id":2,"Name":"Ballon","Category":"Toy","Price":1.2}]}

But when i extend to this (trying to do paging)

{"data":[{"Id":1,"Name":"Hammer","Category":"Hardware","Price":12.9},{"Id":2,"Name":"Ballon","Category":"Toy","Price":1.2}],"draw":1,"recordsTotal":24,"recordsFiltered":24}

It stops working.

allan · November 2015

Can you link to a test case showing the issue, or update the code at the link above to show the new issue.

Allan

fkmbkk · November 2015

Ok I managed to setup one free hosting..

http://fkmbkk-001-site1.atempurl.com/DataTables.html

Thank you.

fkmbkk · November 2015

Please click the 'Load' button...

fkmbkk · November 2015

Are you able to view the sample ?

allan · November 2015

"draw":1

That is not correct. The draw property has a value of 2 for that request, so DataTables things your response is for an old request and ignores it.

Use draw: data.draw to get the correct draw value.

Allan

fkmbkk · November 2015

Its working now...

http://fkmbkk-001-site1.atempurl.com/DataTables.html

But the pager highlight is not working..did I miss something ?

Allan: Can I continue posting here...? cause I may ask more question, till I completed this example.

allan · November 2015

Your CSS include is:

https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css

But your Javascript include is:

https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.9/datatables.min.js

So you are using the default DataTables styling with a Bootstrap styled table - hence the issue. You need to pick if you want Bootstrap styling or not.

I would suggest using the download builder for both your CSS and JS.

Allan

Refresh Javascript Source Data

Refresh Javascript Source Data

Answers

Howdy, Stranger!

Categories

DataTables

Refresh Javascript Source Data

Refresh Javascript Source Data

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables