我正在尝试在我的 angularjs 项目中使用jquery 数据表插件。但我的问题是它是否支持延迟加载angularjs 的值？我想因为我有很多行。如何在angularjs 中使用数据表 管道。
有在分页的解决方案在这里。如何使用angularjs的解决方案？
在 AngularJs 中使用 Jquery 数据表
IT技术
javascript
jquery
angularjs
jquery-datatables
2021-01-16 15:40:00
6个回答
看看这个：AngularJS+JQuery(datatable)
完整代码：http : //jsfiddle.net/zdam/7kLFU/
JQuery 数据表的文档：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"
}
];
}
在尝试将 jQueryDataTables 与 Angular 结合使用数小时后，我发现我需要一个名为 ng-table 的原生 Angular 指令。它提供排序、分页和 ajax 重新加载（可以通过一些调整进行延迟加载）。
添加一个新答案作为未来研究人员的参考，因为没有人提到过，但我认为它是有效的。
另一个不错的选择是ng-grid http://angular-ui.github.io/ng-grid/。
并且有一个测试版（http://ui-grid.info/）已经有一些改进：
- 原生 AngularJS 实现，没有 jQuery
- 在大数据集上表现良好；甚至 10,000 多行
- 插件架构允许您只使用您需要的功能
更新：
似乎 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>
我知道使用其他开发人员创建的拖放角度module很诱人 - 但实际上，除非您正在做一些非标准的事情，例如通过调用$http服务从 ng-repeated 数据集中动态添加/删除行，您真的没有需要一个基于指令的解决方案，所以如果你真的朝着这个方向发展，你可能只是创建了你实际上并不需要的额外观察者。
这个实现提供了什么：
- 分页总是正确的
- 过滤总是正确的（即使您添加自定义过滤器，但当然它们只需要在同一个闭包中）
实施很容易。只需使用视图控制器中准备好的 Angular 版本的 jQuery dom：
在您的控制器内部：
'use strict';
var yourApp = angular.module('yourApp.yourController.controller', []);
yourApp.controller('yourController', ['$scope', '$http', '$q', '$timeout', function ($scope, $http, $q, $timeout) {
$scope.users = [
{
email: 'email@address.com',
name: {
first: 'User',
last: 'Last Name'
},
phone: '(416) 555-5555',
permissions: 'Admin'
},
{
email: 'example@email.com',
name: {
first: 'First',
last: 'Last'
},
phone: '(514) 222-1111',
permissions: 'User'
}
];
angular.element(document).ready( function () {
dTable = $('#user_table')
dTable.DataTable();
});
}]);
现在在您的 html 视图中可以执行以下操作：
<div class="table table-data clear-both" data-ng-show="viewState === possibleStates[0]">
<table id="user_table" class="users list dtable">
<thead>
<tr>
<th>E-mail</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Permissions</th>
<th class="blank-cell"></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in users track by $index">
<td>{{ user.email }}</td>
<td>{{ user.name.first }}</td>
<td>{{ user.name.last }}</td>
<td>{{ user.phone }}</td>
<td>{{ user.permissions }}</td>
<td class="users controls blank-cell">
<a class="btn pointer" data-ng-click="showEditUser( $index )">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
其它你可能感兴趣的问题