Javascript 在 AngularJs 中使用 Jquery 数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14242455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Jquery Datatable with AngularJs
提问by cguzel
I'm trying to use the jquery datatable pluginin my angularjs project. but my question is does it support lazy loadingof value for angularjs? i want beacuse i have many row. how to use datatable pipelinewith angularjs.
我正在尝试在我的 angularjs 项目中使用jquery 数据表插件。但我的问题是它是否支持延迟加载angularjs 的值？我想因为我有很多行。如何在angularjs 中使用数据表 管道。
There is a solution for pagination in here. How to use the solution with angularjs?
有在分页的解决方案在这里。如何使用angularjs的解决方案？
回答by Thiago C. S Ventura
Take a look at this: AngularJS+JQuery(datatable)
看看这个：AngularJS+JQuery(datatable)
FULL code: http://jsfiddle.net/zdam/7kLFU/
完整代码：http: //jsfiddle.net/zdam/7kLFU/
JQuery Datatables's Documentation: http://www.datatables.net/
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"
}
];
}
回答by Peter Drinnan
After many hours of experimenting with using jQueryDataTables with Angular, I found what I needed was available with a native Angular directive called ng-table. It provides sorting, pagination, and ajax reloads (sort of lazy loading capable with a few tweaks).
在尝试将 jQueryDataTables 与 Angular 结合使用数小时后，我发现我需要一个名为 ng-table 的原生 Angular 指令。它提供排序、分页和 ajax 重新加载（通过一些调整可以进行延迟加载）。
回答by Thiago C. S Ventura
Adding a new answer just as a reference for future researchers and as nobody mentioned that yet I think it's valid.
添加一个新答案作为未来研究人员的参考，因为没有人提到过，但我认为它是有效的。
Another good option is ng-gridhttp://angular-ui.github.io/ng-grid/.
另一个不错的选择是ng-grid http://angular-ui.github.io/ng-grid/。
And there's a beta version (http://ui-grid.info/) available already with some improvements:
并且有一个测试版（http://ui-grid.info/）已经有一些改进：
- Native AngularJS implementation, no jQuery
- Performs well with large data sets; even 10,000+ rows
- Plugin architecture allows you to use only the features you need
- 原生 AngularJS 实现，没有 jQuery
- 在大数据集上表现良好；甚至 10,000 多行
- 插件架构允许您只使用您需要的功能
UPDATE:
更新：
It seems UI GRID is not beta anymore.
似乎 UI GRID 不再是测试版了。
With the 3.0 release, the repository has been renamed from "ng-grid" to "ui-grid".
在 3.0 版本中，存储库已从“ng-grid”重命名为“ui-grid”。
回答by Kinjal Gohil
For AngularJs you have to use "angular-datatables.min.js" file for datatable settings. You will get this from http://l-lin.github.io/angular-datatables/#/welcome.
对于 AngularJs，您必须使用“angular-datatables.min.js”文件进行数据表设置。你可以从http://l-lin.github.io/angular-datatables/#/welcome得到这个。
After that you can write code like below,
之后，您可以编写如下代码，
<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>
回答by DrewT
I know it's tempting to use drag and drop angular modules created by other devs - but actually, unless you are doing something non-standard like dynamically adding / removing rows from the ng-repeated data set by calling $httpservices chance are you really don't need a directive based solution, so if you do go this direction you probably just created extra watchers you don't actually need.
我知道使用其他开发人员创建的拖放 angular 模块很诱人 - 但实际上，除非你正在做一些非标准的事情，比如通过调用$http服务从 ng-repeated 数据集中动态添加/删除行，你真的没有需要一个基于指令的解决方案，所以如果你真的朝着这个方向发展，你可能只是创建了你实际上并不需要的额外观察者。
What this implementation provides:
此实现提供了什么：
- Pagination is always correct
- Filtering is always correct (even if you add custom filters but of course they just need to be in the same closure)
- 分页总是正确的
- 过滤总是正确的（即使您添加自定义过滤器，但当然它们只需要在同一个闭包中）
The implementation is easy. Just use angular's version of jQuery dom ready from your view's controller:
实施很容易。只需使用视图控制器中准备好的 Angular 版本的 jQuery dom：
Inside your controller:
在您的控制器内部：
'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 protected]',
name: {
first: 'User',
last: 'Last Name'
},
phone: '(416) 555-5555',
permissions: 'Admin'
},
{
email: '[email protected]',
name: {
first: 'First',
last: 'Last'
},
phone: '(514) 222-1111',
permissions: 'User'
}
];
angular.element(document).ready( function () {
dTable = $('#user_table')
dTable.DataTable();
});
}]);
Now in your html view can do:
现在在您的 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>
回答by Kalaiselvan
visit this link for reference:http://codepen.io/kalaiselvan/pen/RRBzda
访问此链接以供参考：http: //codepen.io/kalaiselvan/pen/RRBzda
<script>
var app=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
app.controller('validationCtrl',function($scope){
$scope.data=[
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011\/04\/25",
"0,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011\/07\/25",
"0,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009\/01\/12",
",000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012\/03\/29",
"3,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008\/11\/28",
"2,700"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012\/12\/02",
"2,000"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012\/08\/06",
"7,500"
],
[
"Rhona Davidson",
"Integration Specialist",
"Tokyo",
"6200",
"2010\/10\/14",
"7,900"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009\/09\/15",
"5,500"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008\/12\/13",
"3,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008\/12\/19",
",560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013\/03\/03",
"2,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008\/10\/16",
"0,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012\/12\/18",
"3,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010\/03\/17",
"5,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012\/11\/27",
"8,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010\/06\/09",
"5,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009\/04\/10",
"7,500"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012\/10\/13",
"2,000"
],
[
"Dai Rios",
"Personnel Lead",
"Edinburgh",
"2290",
"2012\/09\/26",
"7,500"
],
[
"Jenette Caldwell",
"Development Lead",
"New York",
"1937",
"2011\/09\/03",
"5,000"
],
[
"Yuri Berry",
"Chief Marketing Officer (CMO)",
"New York",
"6154",
"2009\/06\/25",
"5,000"
],
[
"Caesar Vance",
"Pre-Sales Support",
"New York",
"8330",
"2011\/12\/12",
"6,450"
],
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"3023",
"2010\/09\/20",
",600"
],
[
"Angelica Ramos",
"Chief Executive Officer (CEO)",
"London",
"5797",
"2009\/10\/09",
",200,000"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010\/12\/22",
",575"
],
[
"Jennifer Chang",
"Regional Director",
"Singapore",
"9239",
"2010\/11\/14",
"7,650"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011\/06\/07",
"6,850"
],
[
"Fiona Green",
"Chief Operating Officer (COO)",
"San Francisco",
"2947",
"2010\/03\/11",
"0,000"
],
[
"Shou Itou",
"Regional Marketing",
"Tokyo",
"8899",
"2011\/08\/14",
"3,000"
],
[
"Michelle House",
"Integration Specialist",
"Sidney",
"2769",
"2011\/06\/02",
",400"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009\/10\/22",
"4,500"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011\/05\/07",
"5,000"
],
[
"Gavin Cortez",
"Team Leader",
"San Francisco",
"2860",
"2008\/10\/26",
"5,500"
],
[
"Martena Mccray",
"Post-Sales support",
"Edinburgh",
"8240",
"2011\/03\/09",
"4,050"
],
[
"Unity Butler",
"Marketing Designer",
"San Francisco",
"5384",
"2009\/12\/09",
",675"
],
[
"Howard Hatfield",
"Office Manager",
"San Francisco",
"7031",
"2008\/12\/16",
"4,500"
],
[
"Hope Fuentes",
"Secretary",
"San Francisco",
"6318",
"2010\/02\/12",
"9,850"
],
[
"Vivian Harrell",
"Financial Controller",
"San Francisco",
"9422",
"2009\/02\/14",
"2,500"
],
[
"Timothy Mooney",
"Office Manager",
"London",
"7580",
"2008\/12\/11",
"6,200"
],
[
"Hymanson Bradshaw",
"Director",
"New York",
"1042",
"2008\/09\/26",
"5,750"
],
[
"Olivia Liang",
"Support Engineer",
"Singapore",
"2120",
"2011\/02\/03",
"4,500"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011\/05\/03",
"3,500"
],
[
"Sakura Yamamoto",
"Support Engineer",
"Tokyo",
"9383",
"2009\/08\/19",
"9,575"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013\/08\/11",
",540"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009\/07\/07",
",500"
],
[
"Serge Baldwin",
"Data Coordinator",
"Singapore",
"8352",
"2012\/04\/09",
"8,575"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010\/01\/04",
"5,250"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012\/06\/01",
"5,000"
],
[
"Jennifer Acosta",
"Junior Javascript Developer",
"Edinburgh",
"3431",
"2013\/02\/01",
",650"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011\/12\/06",
"5,600"
],
[
"Hermione Butler",
"Regional Director",
"London",
"1016",
"2011\/03\/21",
"6,250"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009\/02\/27",
"3,500"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010\/07\/14",
",500"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008\/11\/13",
"3,000"
],
[
"Michael Bruce",
"Javascript Developer",
"Singapore",
"5384",
"2011\/06\/27",
"3,000"
],
[
"Donna Snider",
"Customer Support",
"New York",
"4226",
"2011\/01\/25",
"2,000"
]
]
$scope.dataTableOpt = {
//if any ajax call
};
});
</script>
<div class="container" ng-app="formvalid">
<div class="panel" data-ng-controller="validationCtrl">
<div class="panel-heading border">
<h2>Data table using jquery datatable in Angularjs </h2>
</div>
<div class="panel-body">
<table class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in data">
<td>{{$index+1}}</td>
<td>{{n[0]}}</td>
<td>{{n[1]}}</td>
<td>{{n[2]}}</td>
<td>{{n[3]}}</td>
<td>{{n[4] | date:'dd/MM/yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
