ng-repeat 排序箭头在 javascript 数据表中不起作用 [英] ng-repeat sorting arrow not working in javascript datatables

查看:25
本文介绍了ng-repeat 排序箭头在 javascript 数据表中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对 AngularJs 和数据表很陌生.我需要使用 ng-repeat 填充表行中的数据.我能够第一次填充行并启用排序.当我点击箭头进行升序或降序排序时,行数据擦除.

I'm very new to AngularJs and datatables. I have a requirement to populate the data in table rows using ng-repeat. Iam able to populate the rows and enabling the sorting for the first time. When i click on the arrows to sort ascend or descend the row data wiping off.

这是我的表数据

<table datatable="ng" id="example" class="display" cellspacing="0"    width="100%">
                <thead>
                    <tr>
                        <th class="col1">Campaign Name</th>
                        <th class="col4">Description</th>
                        <th class="col5">Activate/Deactivate</th>
                        <th class="col5">edit</th>
                        <!-- <th class="col5">status</th> -->
                        <!-- <th class="col5">Details</th> -->
                    </tr>
                </thead>
                <tbody >
                    <tr ng-repeat="campaign in campaignListData">
                             <td>{{campaign.campaignObject.campaignName}}</td>
                             <td>{{campaign.campaignObject.campaignMessage}}</td>
                            <td><button type="button" class="pay-amount pending" style="margin-top:-10px;margin-right:17px;width:128px;height:34px"
                            value = "{{ campaign.campaignObject.label }}" title="ACTIVATE" ng-click="updateCampaignStatus(campaign.campaignObject.id)">
                                <span style="margin-left:-10px;margin-right:17px;width:128px;height:34px">{{ campaign.campaignObject.label }}</span>
                                </button>
                            </td>
                            <td><a href="<c:url value="${contextPath}/merchant/manageCampaign/editCampaignConfiguration"/>?campaignId={{ campaign.campaignObject.id }}">
                                <img class="tableImage" style="margin-left:-8px;margin-top:-10px;" src="<c:url value="/resources/images/setting.png" />" ></a>
                            </td>
                    </tr>
                </tbody>
            </table> 

这是我的排序 javascript 代码

Here is my sorting javascript code

<script type="text/javascript">
    $(document).ready(function() {
        $("#noCampaignData").hide();
        //$("#example_paginate").hide();
        var rowCount = $("#example tr").length;
        console.log("Row count value is"+rowCount);
        if (rowCount >= 0) {
            console.log("Entered into Sorting");
            $("#example").dataTable({
                "pagingType" : "full_numbers",
                "order" : [ [ 2, "desc" ] ]
            });
        }
    });
</script>

我得到 tr 的行数为 1

I'm getting rowcount for tr is 1

我在页面底部包含了js文件

I have the js file included at the bottom of the page

<script src="<c:url value="/resources/js/CampaignListController.js" />"></script>
<script src="<c:url value="/resources/js/jquery.dataTables.min.js" />"></script>

当我加载数据时,使用 ng-repeat 进行精细加载.但是当我点击标题按升序或降序排序时,行会被擦除.

When Im loading data its fine loading with ng-repeat. But when i click on header to sort ascending or descending, rows are wiped off.

请告诉我哪里做错了?我无法对数据进行升序、降序和分页排序.

Please advise me where i'm doing wrong? I'm unable to sort the data ascending, descending and pagination is not at all working.

对不起我的英语.

推荐答案

无意冒犯,但这是 jQuery 和 Angular 思维的典型混淆,或者是缺乏对 Angular 工作原理的理解.这里尝试将一些 jQuery 逻辑包装到 角度摘要循环.阅读对如果我有 jQuery 背景的在 AngularJS 中思考"这个问题的精彩回答?

No offense, but this is a typical mix-up of jQuery and Angular thinking, or a lack of understanding how Angular works. Here an attempt to wrap some jQuery logic into the angular digest loop. Read a great answer to the question "Thinking in AngularJS" if I have a jQuery background?

你永远不能结合 $(document).ready(function() { 和 Angular.事实上,你可以非常确定你的 ready() 被执行了早在 Angular 完成它的 ng-repeat 业务之前.这就是为什么你总是得到 1 的行数(标题)以及为什么当你点击标题时行消失了.当时你get row count 那里没有插入任何行,并且在您实例化 dataTable() 时,没有插入任何行.

You cannot ever combine $(document).ready(function() { and Angular. In fact, you can be very sure that your ready() is executed long before Angular has finished its ng-repeat business. And thats why you always get 1 for the row count (the header) and why the rows are dissappearing when you click on the headers. At the time you get row count there is not inserted any rows, and at the time you instantiate the dataTable(), no rows have been inserted.

你可以使用 $timeout 来强制延迟代码,或者强制它进入下一个摘要循环:

You can use $timeout to force delay of the code, or force it into the next digest loop :

$scope.initDataTable = function() {
   $timeout(function() {
      $("#noCampaignData").hide();
      //$("#example_paginate").hide();
      var rowCount = $("#example tr").length;
      console.log("Row count value is"+rowCount);
      if (rowCount >= 0) {
         console.log("Entered into Sorting");
         $("#example").dataTable({
            "pagingType" : "full_numbers",
            "order" : [ [ 2, "desc" ] ]
         });
      }
   }, 200)
}

或创建一个 directive 来实例化 dataTable 一旦数据由 ng-repeat 填充,如 ng-repeat 完成事件的多个答案所示 :

or create a directive that instantiates the dataTable once the data is populated by ng-repeat, as demonstrated in multiple answers for ng-repeat finish event :

.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) { // all are rendered
            scope.$eval(attrs.repeatDone);
        }
    }
})

...

<tr ng-repeat="campaign in campaignListData" repeat-done="initDataTable">

...

$scope.initDataTable = function() {
      $("#noCampaignData").hide();
      $("#example").dataTable({
         ...
      });
}

希望能帮到你.

这篇关于ng-repeat 排序箭头在 javascript 数据表中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆