Jquery DataTable Angular答案

【问题标题】：Jquery DataTable AngularJquery DataTable Angular
【发布时间】：2015-04-29 23:18:30
【问题描述】：

我是 jquery DataTable 的忠实粉丝，但我意识到使用 AngularJs，它不起作用，它显示所有数据而没有分页，并说“表中没有可用的数据显示 0 到 0 个条目”。我已经看到网站http://l-lin.github.io/angular-datatables/，但我无法让它工作，我从数据库中获取信息。我是 Angular JS 的新手。所以基本上有一种人类的方式来使用 angular 的 jquery 数据表并成功吗？。

        Arr                 = new Object();
        Arr['Accion']       = "ObtenerDatosPersonal";
        params              = JSON.stringify(Arr);

        var url = 'modulos/personal/funciones.php';
       $http({
            method: "post",
          url: url,
          data: $.param({params:params}), 
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
         }).success(function(data, status, headers, config) {
            $scope.Empleadosmodal = data.Empleados;
            Cantidad              = Empleados.length;

            $('#Empleados').DataTable();
            $("#myModal").modal("show");    
         })/*Success*/
         .error(function(data, status, headers, config) 
         {
            alert("Ha fallado la petición. Estado HTTP:"+status);
         });

【问题讨论】：

在浏览器开发工具中检查请求，是否已完成？有什么错误吗？您不能在字符串上使用$.param()。最好将您的代码放在可以使用element.Datatable() 的指令中，并且已经有可用于数据表的开源指令
没有报错，我可以看到表上的全部数据，但是jquery数据表无法识别表中的数据。

标签： javascript jquery angularjs datatable

【解决方案1】：

绑定或填充数据到表后，您必须使用“ChangeDetectorRef”来检测对 HTML DOM 的更改。然后加载您的数据表方法。

以下是简单的解决方案：

将动态数据加载/绑定到表的本地对象中
使用 Angular 的“ChangeDetectorRef”库。
为您的表加载数据表脚本。

【讨论】：

如果您觉得我的回答有用，请标记为回答。

【解决方案2】：

我不是很清楚你的疑问。但是我在 angular 数据表的支持下使用了带有 angularJs 的 Jquery 数据表。您需要在页面中按相同顺序添加以下引用，

<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-datatables.min.js"></script>

使用表格标签，如，

        <table id="example" datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">

然后将 DTOptionsBuilder 服务添加到控制器。

app.controller('userController',ListCtrl);
ListCtrl.$inject['$scope', 'DTOptionsBuilder', 'DTColumnBuilder'];
function ListCtrl($scope, DTOptionsBuilder, DTColumnBuilder) {

...............
}

在控制器函数中添加以下内容，

$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
.withOption('bAutoWidth', false)
.withPaginationType('full_numbers')
.withDOM('frtip');

就是这样。它对我有用。请注意，

element.DataTable()

在使用 angularJs 数据表时不需要调用。

【讨论】：