Load New Data With a Button Click

jenningsw22

Hey there Allan thanks for the great plug-in and the great community around the project. I'm having some trouble with my code as I am not very proficient with javascript. Here is what I'm attempting to do. I have different php files that output json for my data. I'm trying to load these different files into my table using fnReloadAjax. I'm not sure if my code is wrong or if I'm going about the loading new data the wrong way but here is my code:

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource )
{
if ( typeof sNewSource != 'undefined' )
{
oSettings.sAjaxSource = sNewSource;
}
this.fnClearTable( this );
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;

$.getJSON( oSettings.sAjaxSource, null, function(json) {
/* Got the data - add it to the table */
for ( var i=0 ; i

allan

Hi jenningsw22,

I don't see anything immediately wrong with the code - what happens when you click the '#rushtab' button? Does the Ajax call correctly go to the server (I'm sure you will know but Firebug is the best way to see this) and does rushing.php have the same number of columns as passing.php?

Do you have a link you could post (or send to me directly if you don't want to make it public: http://www.datatables.net/contact ?) - that would help debugging :-)

Regards,
Allan

jenningsw22

Thanks for the quick reply. here is the page I'm currently working on: http://wtfl.nfshost.com/stats.php
Looking at Firebug I don't think it is passing it but perhaps you will know how to read firebug a little better.
Also rushing.php does have the same number of columns. In fact they are the same file with different names and a few changes in the call to mysql. If it does work not much will change in the table currently. The names and positions should change because they have different where statements.

allan

Hi jenningsw22,

Thanks for the link! Part of the problem is that you don't have an element with the ID of "rushtab" - therefore "$('#rushtab').click(function () {" doesn't actually do anything at all. I presume you want it on the "Rushing" tab at the top of the page - in which case you will need to add an id to that A tag (or change your selector).

One other thing - given the application you are using this for, I'm not sure that fnReloadAjax() is really the best way to go. Either destroy and then recreate the table when changing tabs (which you will need to do if there are different columns) or change the sAjaxSource variable (oTable.fnSettings().sAjaxSource = "rushing.php") and then redraw the table (oTable.fnDraw()) - you might need to reset sorting, paging and filtering as well.

Hope this helps,
Allan

jenningsw22

The table will have different columns so I guess I do need to destroy the table and recreate a new one. I've been trying to figure out how to do this. Do you have an example I could look at of how this is done?

allan

Hi jenningsw22,

I don't have a direct example of destroying a table, but perhaps the best way of doing it is to wrap it in a div (or whatever) and then simply set the innerHTML for that element to be blank. Then clear the oTable object by 'delete oTable'. Then you can recreate the table using something like http://datatables.net/examples/example_dynamic_creation.html .

Having said that, would there be anything wrong with just reloading the page at this point? If the user clicks on the tab, they can be directed to the required page. Either way should work fine though :-)

Allan