Angular datatable fnDraw() doesn't work

boopage

I am using datatable lib in an angular directive similar to Ventura suggested http://stackoverflow.com/questions/14242455/using-jquery-datatable-with-angularjs. I have a problem with the fnDraw, in my app I have multiple web pages each have a datatable, since I use angular the page doesn't reload at all. My datatable can still load data on each page, BUT after visited more than one page, then try to call scope.dataTable.fnDraw() to filter my datatable, I got this error:Uncaught TypeError: Cannot read property 'oFeatures' of null

I put some break points in the reDraw function, and found out oSettings(line 5557) is null, in the _fnSettingsFromNode function I can see DataTable.settings[i].nTable === nTable (line 4611) alwasy return false, and I can find DataTable.settings contains multiple datatables but the for loop cannot match with the current one

Any idea?

function _fnSettingsFromNode ( nTable )
{
for ( var i=0 ; i

allan

Is Angular replacing the table node? I'd be very surprised if DataTables and Angular worked well together to be honest, since you've got two different libraries which don't know about each other, both trying to update the DOM.

Allan

boopage

Hi Allan

It works well before I uses Angular routes, because the page refresh every time, But now the page does not refresh and this error started to occur. This is the html before Datatable and angular applied: https://gist.github.com/jianbo/6740093, and this is after https://gist.github.com/jianbo/6740088, any idea?

Thanks

boopage

Looks like the Datatable couldn't find the oSettings variable when I call the fnDraw(). In my Angular directive I can out put the correct oSettings by oSettings = scope.dataTable.fnSettings() where "scope.dataTable" is my scope variable, is there a way I can pass this into the fnDraw() method?

boopage

Hi Allan

Its now solved by referencing Datatable through $.fn.dataTableSettings[i].oInstance.fnFilter()

allan

Good to hear you have a workaround. Given that you note that Angular is reloading the page each time, I am far from surprised that you need a hack to get the two to work together - I'm only surprised that it was such a simple hack!

Note to anyone else reading this - this is not supported! At the moment, Angular and DataTables don't appear to play well together.

Allan