angular与datatables 的结合（二）

最新推荐文章于 2024-08-10 08:43:33 发布

登辉

最新推荐文章于 2024-08-10 08:43:33 发布

阅读量1.3w

点赞数

分类专栏： web开发 jquery angularjs 文章标签： angular datatables web前端

本文链接：https://blog.youkuaiyun.com/hanxiao358544923/article/details/44834131

版权

web开发同时被 3 个专栏收录

13 篇文章

订阅专栏

jquery

5 篇文章

订阅专栏

angularjs

3 篇文章

订阅专栏

本文详细介绍了如何在Angular项目中集成DataTables，分别从HTML部分和AngularJS部分进行阐述，展示了具体的实现步骤和最终的显示效果，帮助开发者实现前端数据展示的高效和美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular与datatable

html 部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bower_components/datatables/media/css/jquery.dataTables.min.css">
</head>
<body ng-app ="myModule">
<div ng-controller="AngularWayChangeDataCtrl as showCase">
    <form class="form-inline" ng-submit="showCase.addPerson()">
        <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
            <thead>
            <tr>
                <th>
                    <div class="form-group">
                        <label>
                            <input class="form-control" type="number" name="id" ng-model="showCase.person2Add.id" value="">
                        </label>
                    </div>
                </th>
                <th>
                    <div class="form-group">
                        <label>
                            <input type="text" class="form-control" name="firstName" ng-model="showCase.person2Add.firstName" value="">
                        </label>
                    </div>
                </th>
                <th>
                    <div class="form-group">
                        <label>
                            <input type="text" class="form-control" name="lastName" ng-model="showCase.person2Add.lastName" value="">
                        </label>
                    </div>
                </th>
                <th>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success">新增</button>
                    </div>
                </th>
            </tr>
            <tr>
                <th>ID</th>
                <th>FirstName</th>
                <th>LastName</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="person in showCase.persons">
                <td>{{ person.id }}</td>
                <td>{{ person.firstName }}</td>
                <td>{{ person.lastName }}</td>
                <td>
                    <button type="button" ng-click="showCase.modifyPerson($index)" class="btn btn-warning">修改</button>
                    <button type="button" ng-click="showCase.removePerson($index)" class="btn btn-danger">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/datatables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="./app.js"></script>

</body>
</html>

angualrjs 部分



var data1 = [{
    "id": 860,
    "firstName": "Superman",
    "lastName": "Yoda"
}, {
    "id": 870,
    "firstName": "Foo",
    "lastName": "Whateveryournameis"
}, {
    "id": 590,
    "firstName": "Toto",
    "lastName": "Titi"
}, {
    "id": 803,
    "firstName": "Luke",
    "lastName": "Kyle"
}
];

angular.module('myModule', ['datatables'])
  .controller('AngularWayChangeDataCtrl', function ( DTOptionsBuilder, DTColumnDefBuilder){
    var vm = this;
    vm.persons = data1;
    vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
    vm.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1),
        DTColumnDefBuilder.newColumnDef(2),
        DTColumnDefBuilder.newColumnDef(3).notSortable()
    ];
    vm.person2Add = _buildPerson2Add(1);
    vm.addPerson = addPerson;
    vm.modifyPerson = modifyPerson;
    vm.removePerson = removePerson;

    function _buildPerson2Add(id) {
        return {
            id: id,
            firstName: 'Foo' + id,
            lastName: 'Bar' + id
        };
    }
    function addPerson() {
        vm.persons.push(angular.copy(vm.person2Add));
        vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
    }
    function modifyPerson(index) {
        vm.persons.splice(index, 1, angular.copy(vm.person2Add));
        vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
    }
    function removePerson(index) {
        vm.persons.splice(index, 1);
    }
  });

显示效果

总结

这种方法充分应该是完美的，充分利用了angular的模版系统，而且轻度依赖datatable，用来建立应用型web最佳之选。
附：
参考：[angular-datatables参考资料](http://l-lin.github.io/angular-datatables/)