cgu*_*zel 41 javascript jquery angularjs jquery-datatables
我正在尝试在angularjs项目中使用jquery datatable插件.但我的问题是它是否支持延迟加载 angularjs的值？我想要因为我有很多行.如何使用 带角度的数据管道.
有在分页的解决方案在这里.如何使用angularjs的解决方案？
Thi*_*ura 43
看看这个:AngularJS + JQuery(datatable)
完整代码:http://jsfiddle.net/zdam/7kLFU/
JQuery Datatables的文档:http://www.datatables.net/
var dialogApp = angular.module('tableExample', []);
dialogApp.directive('myTable', function() {
return function(scope, element, attrs) {
// apply DataTable options, use defaults if none specified by user
var options = {};
if (attrs.myTable.length > 0) {
options = scope.$eval(attrs.myTable);
} else {
options = {
"bStateSave": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bDestroy": true
};
}
// Tell the dataTables plugin what columns to use
// We can either derive them from the dom, or use setup from the controller
var explicitColumns = [];
element.find('th').each(function(index, elem) {
explicitColumns.push($(elem).text());
});
if (explicitColumns.length > 0) {
options["aoColumns"] = explicitColumns;
} else if (attrs.aoColumns) {
options["aoColumns"] = scope.$eval(attrs.aoColumns);
}
// aoColumnDefs is dataTables way of providing fine control over column config
if (attrs.aoColumnDefs) {
options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
}
if (attrs.fnRowCallback) {
options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
}
// apply the plugin
var dataTable = element.dataTable(options);
// watch for any changes to our data, rebuild the DataTable
scope.$watch(attrs.aaData, function(value) {
var val = value || null;
if (val) {
dataTable.fnClearTable();
dataTable.fnAddData(scope.$eval(attrs.aaData));
}
});
};
});
function Ctrl($scope) {
$scope.message = '';
$scope.myCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$('td:eq(2)', nRow).bind('click', function() {
$scope.$apply(function() {
$scope.someClickHandler(aData);
});
});
return nRow;
};
$scope.someClickHandler = function(info) {
$scope.message = 'clicked: '+ info.price;
};
$scope.columnDefs = [
{ "mDataProp": "category", "aTargets":[0]},
{ "mDataProp": "name", "aTargets":[1] },
{ "mDataProp": "price", "aTargets":[2] }
];
$scope.overrideOptions = {
"bStateSave": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": true,
"bDestroy": true
};
$scope.sampleProductCategories = [
{
"name": "1948 Porsche 356-A Roadster",
"price": 53.9,
"category": "Classic Cars",
"action":"x"
},
{
"name": "1948 Porsche Type 356 Roadster",
"price": 62.16,
"category": "Classic Cars",
"action":"x"
},
{
"name": "1949 Jaguar XK 120",
"price": 47.25,
"category": "Classic Cars",
"action":"x"
}
,
{
"name": "1936 Harley Davidson El Knucklehead",
"price": 24.23,
"category": "Motorcycles",
"action":"x"
},
{
"name": "1957 Vespa GS150",
"price": 32.95,
"category": "Motorcycles",
"action":"x"
},
{
"name": "1960 BSA Gold Star DBD34",
"price": 37.32,
"category": "Motorcycles",
"action":"x"
}
,
{
"name": "1900s Vintage Bi-Plane",
"price": 34.25,
"category": "Planes",
"action":"x"
},
{
"name": "1900s Vintage Tri-Plane",
"price": 36.23,
"category": "Planes",
"action":"x"
},
{
"name": "1928 British Royal Navy Airplane",
"price": 66.74,
"category": "Planes",
"action":"x"
},
{
"name": "1980s Black Hawk Helicopter",
"price": 77.27,
"category": "Planes",
"action":"x"
},
{
"name": "ATA: B757-300",
"price": 59.33,
"category": "Planes",
"action":"x"
}
];
}
Pet*_*nan 18
在使用带有Angular的jQueryDataTables进行了几个小时的实验后,我发现我需要的是一个名为ng-table的原生Angular指令.它提供了排序,分页和ajax重新加载(一些延迟加载,只需一些调整).
添加一个新答案作为未来研究人员的参考,并且没有人提到,但我认为它是有效的.
另一个不错的选择是ng-grid http://angular-ui.github.io/ng-grid/.
并且有一个测试版(http://ui-grid.info/)已经有了一些改进:
更新:
似乎UI GRID不再是测试版.
在3.0版本中,存储库已从"ng-grid"重命名为"ui-grid".
对于 AngularJs，您必须使用“angular-datatables.min.js”文件进行数据表设置。您可以从http://l-lin.github.io/angular-datatables/#/welcome获得此信息。
之后你可以编写如下代码，
<script>
var app = angular.module('AngularWayApp', ['datatables']);
</script>
<div ng-app="AngularWayApp" ng-controller="AngularWayCtrl">
<table id="example" datatable="ng" class="table">
<thead>
<tr>
<th><b>UserID</b></th>
<th><b>Firstname</b></th>
<th><b>Lastname</b></th>
<th><b>Email</b></th>
<th><b>Actions</b></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users" ng-click="testingClick(user)">
<td>{{user.UserId}}</td>
<td>{{user.FirstName}}</td>
<td>{{user.Lastname}}</td>
<td>{{user.Email}}</td>
<td>
<span ng-click="editUser(user)" style="color:blue;cursor: pointer; font-weight:500; font-size:15px" class="btnAdd" data-toggle="modal" data-target="#myModal">Edit</span> |
<span ng-click="deleteUser(user)" style="color:red; cursor: pointer; font-weight:500; font-size:15px" class="btnRed">Delete</span>
</td>
</tr>
</tbody>
</table>
</div>