Cant Seem to Redraw Table? :(

mambomonkey

Hi there! hoping someone can help me! im having a hard time trying to get the datatable to redraw, I need to redraw the table after I drop something using jquery-ui droppable, here is some of my code:
[code]
$('#filemanager').dataTable(
{
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"fnDrawCallback": function() {

$('.edit').editable();

}

}); // End of datatable
[/code]

here is abit of code from my droppable:
[code]
drop: function(event, ui)
{
  oTable.fnDraw();
}

[/code]
but the "oTable.fnDraw();" doesnt seem to work? (ive defined the oTable variable which it recognizes) i need to be able to refresh the tables once i have dropped something. at the moment it just doesn't do anything. I grab the table data from a php file using ajax.

any help would be great!!

thanks :)

ps: great plug-in! :D

allan

You might have oTable defined, but it doesn't look like it has been set :-). oTable = $('#filemanager').dataTable(...); would do it. Or you can use $('#filemanager').dataTable().fnDraw in the drop function (assuming you are using DataTables 1.7).

Allan

mambomonkey

hi allan thanks for your reply, ok so i edited my code abit so now it looks more like this:

( attempted to clean up code examples..sorry its abit messy :s )
[code]

var filemanager = $('#filemanager');

$('#panel-container .jqueryFileTree').livequery(function()
{

oTable = $(this).dataTable(
{
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"fnDrawCallback": function()
{

$('.edit').editable();

}

}); // End of datatable


oTable.fnSortListener( document.getElementById('col-file'), 0);
oTable.fnSortListener( document.getElementById('col-owner'), 1);
oTable.fnSortListener( document.getElementById('col-size'), 2);
oTable.fnSortListener( document.getElementById('col-date'), 3);


}); // End of .jqueryFiletree livequery

filemanager.find('.drop').livequery(function()
{
$(this).droppable(
{
accept: '.drag',
hoverClass: 'hover',
scroll: true,
drop: function(event, ui)
{

var from = $(ui.draggable).attr('href');

if($(this).hasClass('crumbdiv'))
{
var to = $(this).find('a').attr('rel');
}

else
{
var to = $(this).find('a').attr('href');
}


$.ajax(
{
type: "POST",
url: "files.php",
data: "action=move&from=" + from + "&to=" + to + "",
success: function(msg)
{
alert(msg);
 
}
 
});

oTable.fnDraw()

} // End of drop

}); // End of droppable parameters

}); // End of .drop livequery

[/code]


but still nothing :(

i also tried "$('#panel-container .jqueryFileTree').dataTable().fnDraw" and still nothing

am I doing something embarrassingly stupid? :s

any ideas?

(also yes am using datatables 1.7.2)

thanks

vijay.kansal

Hi,

just do one thing if you want to redraw the data table

set oCache.iCacheLower = -1;

before calling oTable.fnDraw();

thanks

mambomonkey

Thanks for the replies guys,

I tried what you said but still the same, but thinking about it after, I think it is drawing the table, its just my php file that gets the info hasnt been refreshed, ( confused myself :S ), so im trying to set this up again but this time using the ajax and json as of one of the examples,

only thing now is im having trouble setting up the correct array in php so it outputs the array like the example:

[code]{ "aData": [[ 10126, 10002253, 415, 123, 123 ]] }[/code]

how do I write out the php array?

so that it get put into the correct json?


thanks again for the help :)

vijay.kansal

mambomonkey can you show me your php code so that we can fix the issue if there is any

thanks

mambomonkey

sorry for the late response :s been a hectic couple of days! ;)

ive changed alot of my code now, I am now using the json method which is alot bettter for what I need to do :)

so serverwise and drawing the table is fine....great infact!

thanks for the help guys!

only thing now is I cant seem to bind any events to the table?

I have tried a simply bind event like

[code] $('.example').bind('click', function()
{
alert('Hello');

});
[/code]


but nothing?

any ideas anyone?


woops, just realised its mentioned in the faq, hopefully this will help :)

vijay.kansal

use the following code

[code]
$('.example').live('click', function()
{
alert('Hello');

});
[/code]

thanks

mambomonkey

hmm tried that, didnt seem to work either :(


after looking through the faq and api etc... i put a bind event in the fnDrawCallback, which works......but does it twice?

[code]

"fnDrawCallback": function()
{


filetree.find('a.directory').live('click', function()
{
alert('hello');

});
}

[/code]

so I get 2 alerts saying hello?

anyone know why that would be?

thanks guys

vijay.kansal

you dont need to put this in call back function just write the following code

[code]
$(dcoment).load( function()
{
$('a.directory').live('click', function()
{
alert('hello');
});
});
[/code]

this code will bind the event at run time

mambomonkey

ah right sorry :s

yeh that works!!

only once too! :)

only thing is now (sorry) is that I have some functions that i need to call to and i cant seem to do it?

http://pastie.org/1210291

quite abit of code so i put i on pastie

so I need the bindtree function to work and so it will trigger the other functions, i tried a couple of things but couldnt get it to work

any ideas?

thanks alot for your help so far guys

really appreciate it!