che*_*tan 7 jquery html5 datatables angularjs angular-directive
我对AngularJs和数据表很新.我需要使用ng-repeat填充表行中的数据.我能够第一次填充行并启用排序.当我点击箭头来排序或下降行数据擦除.
这是我的表格数据
<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代码
<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
我在页面底部包含了js文件
<script src="<c:url value="/resources/js/CampaignListController.js" />"></script>
<script src="<c:url value="/resources/js/jquery.dataTables.min.js" />"></script>
当我使用ng-repeat加载数据时的精细加载.但是当我单击标题以升序或降序排序时,行将被删除.
请告诉我我哪里做错了？我无法对数据进行升序排序,降序和分页根本不起作用.
对不起我的英语不好.
没有冒犯,但这是jQuery和Angular思维的典型混淆,或者缺乏对Angular如何工作的理解.这里尝试将一些jQuery逻辑包装到角度摘要循环中.如果我有jQuery背景,请阅读"Thinking in AngularJS"这个问题的一个很好的答案？
你不可能$(document).ready(function() {和Angular 结合使用.事实上,ready()在Angular完成ng-repeat业务之前很久你就可以确定你的执行时间很长.这就是为什么你总是得到1行数(标题)以及为什么当你点击标题时行消失了.在您获得行计数时,没有插入任何行,并且在您实例化时dataTable(),没有插入任何行.
您可以使用$timeout强制延迟代码,或强制它进入下一个摘要循环:
$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)
}
或者创建一个指令,在填充数据后实例化dataTable ng-repeat,如ng-repeat finish事件的多个答案所示:
.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({
...
});
}
希望这会帮助你.
下面的示例使用AngularJs和Datatable.过滤,分页和排序都很好.
下载angular-datatable并将angular-datatables.min.js文件放入项目中,就像我在行中一样<script src="angular-datatables/dist/angular-datatables.min.js"></script>
希望这可以帮到你.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-datatables/dist/angular-datatables.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
</head>
<body>
<div ng-app="AngularWayApp" ng-controller="AngularWayCtrl">
<table datatable="ng" class="table">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in names" ng-click="testingClick(name)">
<td>{{name.Name}}</td>
<td>{{name.City}}</td>
<td>{{name.Country}}</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module('AngularWayApp', ['datatables']);
app.controller('AngularWayCtrl', function($scope, $http)
{
$http.get("http://www.w3schools.com/angular/customers_mysql.php").success(function (response)
{
$scope.names = response.records;
});
$scope.testingClick = function(name)
{
console.log(name);
};
});
</script>
</div>
</body>
</html>