Angularjs 与 dataTable 的结合（一）

最新推荐文章于 2024-08-16 09:27:16 发布

登辉

最新推荐文章于 2024-08-16 09:27:16 发布

阅读量1.2w

点赞数

分类专栏： web开发 jquery angularjs

本文链接：https://blog.csdn.net/hanxiao358544923/article/details/44833387

版权

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

13 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

angularjs

3 篇文章 0 订阅

订阅专栏

1. Angularjs 与 dataTable的结合

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="node_modules/datatables/media/css/jquery.dataTables.min.css">
</head>
<body>
<div ng-app="tableExample">
    <div ng-controller="Ctrl">
        <button ng-click="addData()">Add Data</button>
         <h2>This table uses columns defined in controller</h2>
        <table my-table options="options">
        </table>
    </div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>

<script src="./app.js"></script>

</body>
</html>

2. angularjs部分

angular.module('tableExample', [])
  .directive('myTable', function () {
    return {
        restrict: 'E, A, C',
        link: function (scope, element, attrs, controller) {
            var dataTable = element.dataTable(scope.options);

            scope.$watch('options.aaData', handleModelUpdates, true);

            function handleModelUpdates(newData) {
                var data = newData || null;
                if (data) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData(data);
                }
            }
        },
        scope: {
            options: "="
        }
    };
  })
  .controller('Ctrl' , function ($scope){
    $scope.options = {
        aoColumns: [{
            "sTitle": "Surname"
        }, {
            "sTitle": "First Name"
        }],
        aoColumnDefs: [{
            "bSortable": false,
            "aTargets": [0, 1]
        }],
        bJQueryUI: true,
        bDestroy: true,
        aaData: [
            ["Webber", "Adam"]
        ]
    };

    $scope.addData = function () {
        $scope.counter = $scope.counter + 1;
        $scope.options.aaData.push([$scope.counter, $scope.counter * 2]);
    };

    $scope.counter = 0;
  })

显示效果