Datatables : How to get pagination working when table HTML is compiled with Angular after drawCallBack?

Question

This is my drawCallBack function :

"fnDrawCallback": function( oSettings ) {
            console.log("dt redrawn");
            var selector = $("#example_table");
            console.log(selector);

            function recompileForAngular() {
                angular.element(document).injector().invoke(['$compile', function ($compile) {
                    // Create a scope.
                    var $scope = angular.element(document.body).scope();
                    // Specify what it is we'll be compiling.
                    var to_compile = $(selector).html();
                    // Compile the tag, retrieving the compiled output.
                    var $compiled = $compile(to_compile)($scope);
                    // Ensure the scope and been signalled to digest our data.
                    $scope.$digest();
                    // Replace the compiled output to the page.
                    $(selector).html($compiled);
                }]);
            }

            function init(recompile) {
                recompile();
            }

            init(recompileForAngular);
        },

This is working fine when data table is loaded, but upon clicking on another page (eg 2nd page), the table HTML is not getting refreshed with the new data returned from AJAX call.

It seems like angular is compiling old HTML which it gets from $("#example_table").html(); .

What's the way to capture the event when the rendering is complete (so that I can re-compile new, freshly rendered HTML)?

Answer 1

Changing the selector, targeting the table body solves this problem. var selector = $("#exampleTable tbody");