reloading new ajax url

aot2002

I cannot seem to get the table to show the new data from the new ajax source. I see the table refresh and I confirmed that the source is changing but the old data still appears.

if ( $.fn.dataTable.isDataTable( '#pageDataTable' ) ) {
                 
                $('#pageDataTable').DataTable().ajax.url( "/members/viewpagedata?project_id=" + projects.scc.getProjectId() ).reload();
                console.log("Project ID:" + projects.scc.getProjectId());

            }else{

                projects.scc.dataTablesObject = $('#pageDataTable').DataTable( {
                    "processing": true,
                    "serverSide": true,
                    "ajax": "/members/viewpagedata?project_id=" + projects.scc.getProjectId()
                } );
            }

jLinux

You probably have to incalidate and/or redraw the table. Look through the reference docs.

If you create an example on live.datatables.net, ill get it workin for ya

aot2002

I think if I just had a simple ajax example that was live working that would help me. There's really nothing special that I'm doing.

jLinux

I didn't notice you were using the serverSide option, so i'm not positive it will work, and i cant create a live.datatables.net instance with serverSide, but I created one with just the ajax, and changed the source using ajax.url().load().

Check it out: http://live.datatables.net/loqataro/3/edit?js,output
Seems to work just fine, but like I said, im not sure it will work with serverSide, you may need to destroy and reload the whole table, but @Allan or @ThomD would know more than I

ThomD

I'd play with rows().invalidate()

jLinux

I think he wants to do the entire table though, wouldnt rows().invalidate() just invalidate the rows for the current datasource?

ThomD

Depends on the selector used. I'd think you could invalidate all the rows. OTOH, part says that we are missing something. Never having done it, I would have thought all one needed was

change the URL, reload, redraw.

aot2002

I can't get the re-draw to work.

var table = $('#pageDataTable').DataTable(); 
                table.ajax.url( "/members/viewpagedata?project_id=" + projects.scc.getProjectId() ).load();
                console.log("Project ID:" + projects.scc.getProjectId());
                table.draw();

var table = $('#pageDataTable'); 
undefined

Although clearly I am using the right selector

$('#pageDataTable').html(); 
"
                                        <thead>
                                            <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="pageDataTable" r.......SNIP

aot2002

rows invalidate not working either. hmmm...

jLinux

Have you tried changing the table page? Just to see what happens? Curious if it still pulls from the first source.

Also, i wonder if the columns have to be the same on the new json page.

Can you put the json to both sources in a pastebin for us or something? If its private stuff, just send the structure of them or something.

aot2002

Good questions.

The paging is not setup I have it returning all data at the moment.

4 columns total.

Columns are identical at the moment. I'm just flipping between sources for project data which is different between each project.

Data snipped showing just three columns used
http://pastebin.com/E3NJRyJn

I also checked and network tab in chrome shows that the data is being retrieved. If I right click on the network URL and open it has the right data but still not working.

I was thinking of trying to destroy the object but I read there are performance issues with that. Not sure how much impact it is.

aot2002

I should of mentioned that the processing dialog is still showing. Although it has returned a 200 status in network tab.

jLinux

I agree that using the destroy is bad, but can you try it out just to see if it works?

Have you tried to initialize the datatable with the 2nd source? just to rule out the sources them selves, isolating the switch itself as the problem

aot2002

I can load either source but as soon as I load one the other will not load

Also tried to run by hand calls in console no go

I'll try destroy when I get back to a computer

jLinux

Its gotta have something to do with it being serverSide, I mean it works fine with just an ajax source.. hmm

aot2002

But the data loads for either source at least once

jLinux

Right, once, then switching to the other doesnt work.. thats what im saying. It works perfectly when its just ajax though.

aot2002

yes destroy is working.

if ( $.fn.dataTable.isDataTable( '#pageDataTable' ) ) {
                 
                var table = $('#pageDataTable').DataTable(); 
                table.destroy();     
                table = $('#pageDataTable').DataTable(); 
                table.ajax.url( "/members/viewpagedata?project_id=" + projects.scc.getProjectId() ).load();
                //$('#pageDataTable').DataTable().rows().invalidate();
                //table.draw();
                
                
            }else{

                projects.scc.dataTablesObject = $('#pageDataTable').DataTable( {
                    "processing": true,
                    "serverSide": true,
                    "ajax": "/members/viewpagedata?project_id=" + projects.scc.getProjectId()
                } );
            }

jLinux

I cant think of what it would be, and I dont have a serverSide instance to troubleshoot, sorry, im sure @allan will chime in and figure it out

aot2002

Thank you JLinux for all your help so far. You've been great! I'll await @allan

jLinux

If the two URL's are externally accessible/public, I could create my own instance from live.datatables.net

aot2002

I could PM you the URLs privately with JSON data. Would just JSON data accessible work?

jLinux

I believe that the serverSide requires something it can send values to..