Angular datatable fnDraw() doesn't work

Question

I am using datatable lib in an angular directive (My directive: https://gist.github.com/jianbo/6734624) similar to Ventura suggested 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.

  $(".resource-filter").live "change", (event) ->
    scope.dataTable.fnDraw() // This is where error triggered 

  $("#sSearch").live "keyup", (event) ->
    scope.dataTable.fnDraw() // This is where error triggered

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<DataTable.settings.length ; i++ )
      {
        if ( DataTable.settings[i].nTable === nTable )
        {
          return DataTable.settings[i];
        }
      }

      return null;
    } 

    oSettings = _fnSettingsFromNode( this[DataTable.ext.iApiIndex] );

Answer 1

It seems to be when there are multiple Datatable instances, "scope.dataTable" cannot reference to the current Datatable.

This solved the problem:

scope.dataTable.fnSettings().oInstance.fnFilter()

Answer 2

Try changing .live to .on, since .live is deprecated.