Javascript 在AngularJs中使用Jquery数据表

我正在尝试在我的angularjs项目中使用。但我的问题是，它是否支持angularjs值的延迟加载？我想要，因为我有很多争吵。如何使用angularjs

---

中存在分页的解决方案。如何使用angularjs的解决方案？

看看这个：angularjs+JQuery（datatable）

完整代码：

JQuery数据表的文档：

---

在对Angular使用jQueryDataTables进行了数小时的实验之后，我发现我需要的是一个名为ng table的本地Angular指令。它提供排序、分页和ajax重新加载（有点延迟加载功能，只需做一些调整）。

添加了一个新的答案，作为未来研究人员的参考，虽然没有人提到这一点，但我认为它是有效的

另一个好的选择是ng grid

还有一个beta版（）已经推出，但有一些改进：

• 原生AngularJS实现，无jQuery
• 能够很好地处理大型数据集；甚至10000多行
• 插件体系结构允许您仅使用所需的功能

更新：

'use strict';

var yourApp = angular.module('yourApp.yourController.controller', []);

yourApp.controller('yourController', ['$scope', '$http', '$q', '$timeout', function ($scope, $http, $q, $timeout) {

    $scope.users = [
        {
            email: 'email@address.com',
            name: {
                first: 'User',
                last: 'Last Name'
            },
            phone: '(416) 555-5555',
            permissions: 'Admin'
        },
        {
            email: 'example@email.com',
            name: {
                first: 'First',
                last: 'Last'
            },
            phone: '(514) 222-1111',
            permissions: 'User'
        }
    ];

    angular.element(document).ready( function () {
         dTable = $('#user_table')
         dTable.DataTable();
     });

}]);

<div class="table table-data clear-both" data-ng-show="viewState === possibleStates[0]">
        <table id="user_table" class="users list dtable">
            <thead>
                <tr>
                    <th>E-mail</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                    <th>Permissions</th>
                    <th class="blank-cell"></th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="user in users track by $index">
                    <td>{{ user.email }}</td>
                    <td>{{ user.name.first }}</td>
                    <td>{{ user.name.last }}</td>
                    <td>{{ user.phone }}</td>
                    <td>{{ user.permissions }}</td>
                    <td class="users controls blank-cell">
                        <a class="btn pointer" data-ng-click="showEditUser( $index )">Edit</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

看起来UI网格不再是测试版了

在3.0版本中，存储库已从“ng grid”重命名 到“ui网格”

---

对于AngularJs，必须使用“AngularDataTables.min.js”文件进行数据表设置。你会从我这里得到这个

之后，您可以编写如下代码

<script>
     var app = angular.module('AngularWayApp', ['datatables']);
</script>

<div ng-app="AngularWayApp" ng-controller="AngularWayCtrl">
  <table id="example" datatable="ng" class="table">
                                    <thead>
                                        <tr>
                                            <th><b>UserID</b></th>
                                            <th><b>Firstname</b></th>
                                            <th><b>Lastname</b></th>
                                            <th><b>Email</b></th>
                                            <th><b>Actions</b></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="user in users" ng-click="testingClick(user)">
                                            <td>
                                                {{user.UserId}}
                                            </td>
                                            <td>
                                                {{user.FirstName}}
                                            </td>
                                            <td>
                                                {{user.Lastname}}
                                            </td>
                                            <td>
                                                {{user.Email}}
                                            </td>
                                            <td>
                                                <span ng-click="editUser(user)" style="color:blue;cursor: pointer; font-weight:500; font-size:15px" class="btnAdd" data-toggle="modal" data-target="#myModal">Edit</span> &nbsp;&nbsp; | &nbsp;&nbsp;
                                                <span ng-click="deleteUser(user)" style="color:red; cursor: pointer; font-weight:500; font-size:15px" class="btnRed">Delete</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </div>

var app=angular.module（'AngularWayApp'，['datatables']）；
用户ID
名字
姓氏
电子邮件
行动
{{user.UserId}
{{user.FirstName}
{{user.Lastname}
{{user.Email}
编辑|
删除

我知道使用由其他开发人员创建的拖放角度模块很有诱惑力，但实际上，除非您正在做一些非标准的事情，例如通过调用

$http

服务从ng重复数据集中动态添加/删除行。您真的不需要基于指令的解决方案吗，所以，如果你朝这个方向走，你可能只是创造了额外的观察者，而你实际上并不需要

此实施提供了什么：

• 分页总是正确的
• 过滤总是正确的（即使您添加了自定义过滤器，但当然它们只需要在同一个闭包中）

实现起来很容易。只需从视图的控制器中使用angular版本的jQuery dom ready即可：

控制器内部：

'use strict';

var yourApp = angular.module('yourApp.yourController.controller', []);

yourApp.controller('yourController', ['$scope', '$http', '$q', '$timeout', function ($scope, $http, $q, $timeout) {

    $scope.users = [
        {
            email: 'email@address.com',
            name: {
                first: 'User',
                last: 'Last Name'
            },
            phone: '(416) 555-5555',
            permissions: 'Admin'
        },
        {
            email: 'example@email.com',
            name: {
                first: 'First',
                last: 'Last'
            },
            phone: '(514) 222-1111',
            permissions: 'User'
        }
    ];

    angular.element(document).ready( function () {
         dTable = $('#user_table')
         dTable.DataTable();
     });

}]);

<div class="table table-data clear-both" data-ng-show="viewState === possibleStates[0]">
        <table id="user_table" class="users list dtable">
            <thead>
                <tr>
                    <th>E-mail</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                    <th>Permissions</th>
                    <th class="blank-cell"></th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="user in users track by $index">
                    <td>{{ user.email }}</td>
                    <td>{{ user.name.first }}</td>
                    <td>{{ user.name.last }}</td>
                    <td>{{ user.phone }}</td>
                    <td>{{ user.permissions }}</td>
                    <td class="users controls blank-cell">
                        <a class="btn pointer" data-ng-click="showEditUser( $index )">Edit</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

现在在html视图中可以执行以下操作：

'use strict';

var yourApp = angular.module('yourApp.yourController.controller', []);

yourApp.controller('yourController', ['$scope', '$http', '$q', '$timeout', function ($scope, $http, $q, $timeout) {

    $scope.users = [
        {
            email: 'email@address.com',
            name: {
                first: 'User',
                last: 'Last Name'
            },
            phone: '(416) 555-5555',
            permissions: 'Admin'
        },
        {
            email: 'example@email.com',
            name: {
                first: 'First',
                last: 'Last'
            },
            phone: '(514) 222-1111',
            permissions: 'User'
        }
    ];

    angular.element(document).ready( function () {
         dTable = $('#user_table')
         dTable.DataTable();
     });

}]);

<div class="table table-data clear-both" data-ng-show="viewState === possibleStates[0]">
        <table id="user_table" class="users list dtable">
            <thead>
                <tr>
                    <th>E-mail</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                    <th>Permissions</th>
                    <th class="blank-cell"></th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="user in users track by $index">
                    <td>{{ user.email }}</td>
                    <td>{{ user.name.first }}</td>
                    <td>{{ user.name.last }}</td>
                    <td>{{ user.phone }}</td>
                    <td>{{ user.permissions }}</td>
                    <td class="users controls blank-cell">
                        <a class="btn pointer" data-ng-click="showEditUser( $index )">Edit</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

电子邮件
名字
姓
电话
权限
{{user.email}
{{user.name.first}
{{user.name.last}
{{user.phone}
{{user.permissions}}
编辑

请访问此链接以获取参考：

var app=angular.module（'formvalid'，['ui.bootstrap'，'ui.utils']）；
app.controller（'validationCtrl'，函数（$scope）{
$scope.data=[
[
“老虎尼克松”，
“系统架构师”，
“爱丁堡”，
"5421",
"2011\/04\/25",
"$320,800"
],
[
“加勒特·温特斯”，
“会计师”，
“东京”，
"8422",
"2011\/07\/25",
"$170,750"
],
[
“阿什顿·考克斯”，
“初级技术作者”，
“旧金山”，
"1562",
"2009\/01\/12",
"$86,000"
],
[
“塞德里克·凯利”，
“高级Javascript开发人员”，
“爱丁堡”，
"6224",
"2012\/03\/29",
"$433,060"
],
[
“空中佐藤”，
“会计师”，
“东京”，
"5407",
"2008\/11\/28",
"$162,700"
],
[
“Brielle Williamson”，
“集成专家”，
“纽约”，
"4804",
"2012\/12\/02",
"$372,000"
],
[
“赫罗德·钱德勒”，
“销售助理”，
“旧金山”，
"9608",
"2012\/08\/06",
"$137,500"
],
[
“Rhona Davidson”，
“集成规范