Datatables:在drawCallBack之后用Angular编译表格HTML时如何使分页工作?

Posted

技术标签:

【中文标题】Datatables:在drawCallBack之后用Angular编译表格HTML时如何使分页工作?【英文标题】:Datatables : How to get pagination working when table HTML is compiled with Angular after drawCallBack? 【发布时间】:2017-07-27 16:33:47 【问题描述】:

这是我的 drawCallBack 函数:

"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);
        ,

当加载数据表时这工作正常,但在单击另一个页面(例如第二页)时,表格 HTML 不会被 AJAX 调用返回的新数据刷新。

似乎 Angular 正在编译从 $("#example_table").html(); 获取的旧 HTML。

渲染完成时捕获事件的方法是什么(以便我可以重新编译新的、新渲染的 HTML)?

【问题讨论】:

【参考方案1】:

更改选择器,定位表体解决了这个问题。 var selector = $("#exampleTable tbody");

【讨论】:

以上是关于Datatables:在drawCallBack之后用Angular编译表格HTML时如何使分页工作?的主要内容,如果未能解决你的问题,请参考以下文章

jquery之DataTables的使用

ABP之展现层(Datatables分页)

JQuery插件之Jquery.datatables.js用法及api

datatable合并多列

在 JSP 上使用 Jquery Ajax 在 Datatables 上显示

如何始终在 R Shiny 的 DataTables 中显示 3 位小数? [关闭]