如何在Angular数据表

时间:2016-12-07 10:35:08

标签: javascript angularjs datatables

让我们说,我有简单的数据表

            <table datatable="" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                </thead>
                <tbody>
                    <tr ng-repeat"reservation in reservations">
                        <td>{{reservation.ID}}</td><td>{{reservation.name}}</td>
                    </tr>
                </tbody>
            </table>    

当我将一些字符串放入搜索框时,正在过滤数据表。现在我想在过滤的行中迭代Angular并将ID读取到数组。如何在Angular中处理它?我可以使用jquery,但我不想在代码中乱七八糟。

2 个答案:

答案 0 :(得分:1)

  $scope.addressDTInstance = {};
    var j = $scope.addressDTInstance.DataTable.rows();
  <table id="addressSelectionTable" class="table table-condensed table-bordered" datatable="ng" dt-options="addressdtOptions" dt-column-defs="addressdtColumnDefs" dt-instance="addressDTInstance">

这是让你顺利进行的事情。需要一个你没有的dtInstance实例。所以在html表标签中添加dt-instance ='dtInstance'。 然后在控制器的顶部启动它,$ scope.dtInstance = {};。 在您的javascript中执行单击或某些操作,您可以设置断点,然后检查$ scope.dtInstance以查看您拥有的所有属性和方法。正如你在我的片段中看到的那样,我正在访问我的dtInstance的DataTable.Rows。如果你需要更好的例子或帮助,请给我留言,我会修改。

UPDATE 这是我发现的一种方法。我正在使用DTOptionsbuilder。这将被调用两次,首先是在创建它时,第二次是在我填充填充我的表的数组变量时。我只是检查是否存在行,而第一个不是'无结果'。

 $scope.addressdtOptions = DTOptionsBuilder.newOptions()
                   .withOption('bFilter', false)
                   .withOption('bInfo', false)
                   .withOption('paging', false)
                   .withOption('processing', true)
                   .withOption('aaSorting', [1, 'asc'])
                   .withOption('language', { zeroRecords: 'No results' })
                   .withOption('initComplete', function () {
                       var rows = $("#addressSelectionTable > tbody > tr");
                       if (rows.length > 0 && rows[0].innerText !== "No results") {
                           var x = 3;
                       }

                   });

这里我设置的是表格的ng-repeat变量。你可能不会这样做,但你应该能够按照自己的方式解决问题。

 $.when($OfficerService.GetAddressSelections($scope.officer.EntityID, $scope.officer.EntityTypeID, $scope.officer.MemberID)).then(function (result) {
                        $scope.addresses = result.data;
                        $scope.$applyAsync();
                    });
<table id="addressSelectionTable" class="table table-condensed table-bordered" datatable="ng" dt-options="addressdtOptions" dt-column-defs="addressdtColumnDefs" dt-instance="addressDTInstance">
                <thead>
                    <tr>
                        <th></th>
                        <th>Type</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip</th>
                        <th>Country</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="a in addresses">
                        <td class="centerColumn">
                            <input type="button" class="btn btn-primary" value="Select" ng-click="selectAddress(a.AddressID,a.AddressLocationCode,$event)" />
                        </td>
                        <td>
                            <span ng-if="a.AddressLocationCode == 'E'">Office</span>
                            <span ng-if="a.AddressLocationCode == 'M'">Member</span>
                        </td>
                        <td>
                            {{a.AddressLine1}}
                            <span ng-if="a.AddressLine2 != null"><br /> {{a.AddressLine2}}</span>
                        </td>
                        <td>{{a.City}}</td>
                        <td>{{a.StateCode}}</td>
                        <td>{{a.Zip}}</td>
                        <td>{{a.CountryCode}}</td>
                        <td>{{a.AddressID}}</td>
                    </tr>
                </tbody>
            </table>

答案 1 :(得分:0)

对我来说,它有效:$scope.dtInstance.DataTable.rows( { search: 'applied' } ).data()