<table datatable dtOptions="dtOptionsExample2" class="table table-striped m-b-none"></table>
controller设置：

1. <span style="font-weight: normal;">$scope.dtOptions = {
2. "bProcessing": true,
3. "bServerSide": true,
4. iDisplayLength: 5,
5. sAjaxSource: 'http://10.188.192.200:8080/employee/page?deptId='+ data,
6. sAjaxDataProp: 'aaData',
7. "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
8. sPaginationType: "full_numbers",
9. "aoColumns":
10. [
11. { "mData": "employeeId" },
12. { "mData": "employeeName",
13. "sClass": "center",
14. "mRender": function(data,type,full) {
15. return '<a class="emplyeeInfoLink" href="javascript:;">阿司法所</a>';
16. }
17. },
18. { "mData": "employeeEmail" },
19. { "mData": "employeeMobilePhoneMaster" }
20. ],
21. /*"aoColumnDefs":[
22. {
23. "aTargets":[4],
24. "mData": null
25. }
26. ],*/
27. "fnServerData": function( sUrl, aoData, fnCallback, oSettings ) {
28. oSettings.jqXHR = $.ajax({
29. "url": sUrl,
30. beforeSend: function(xhr) {
31. xhr.withCredentials = true;
32. },
33. "data": aoData,
34. "type": 'get',
35. "success": fnCallback,
36. "cache": false
37. });
38. }
39. }</span>

[javascript] view plaincopy print?

1. <span style="font-size:14px;">angular.module('datatablesDirectives', []).directive('datatable', function ($http) {
2. return {
3. // I restricted it to A only. I initially wanted to do something like
4. // <datatable> <thead> ... </thead> </datatable>
5. // But thead elements are only valid inside table, and <datatable> is not a table.
6. // So.. no choice to use <table datatable>
7. restrict: 'A',
8. link: function ($scope, $elem, attrs) {
9. var options = {};
10. // Start with the defaults. Change this to your defaults.
11. options = {}
12. // If dtOptions is defined in the controller, extend our default option.
13. if (typeof $scope.dtOptions !== 'undefined') {
14. angular.extend(options, $scope.dtOptions);
15. }
16. // If dtoptions is not declared, check the other options
17. if (attrs['dtoptions'] === undefined) {
18. // Get the attributes, put it in an options
19. // We need to do a switch/case because attributes does not retain case
20. // and datatables options are case sensitive. Damn. It's okay! We need to detect
21. // the callbacks anyway and call it as functions, so it works out!
22. // I put what I needed, most of my settings are not dynamics except those 2.
23. for (property in attrs) {
24. switch (property) {
25. // This is the ajax source
26. case 'sajaxsource':
27. options['sAjaxSource'] = attrs[property];
28. break;
29. // This is the ajax data prop. For example, your result might be
30. // {code: 200, data: [ .. ]} -> in the case, sAjaxDataProp is data
31. case 'sajaxdataprop':
32. options['sAjaxDataProp'] = attrs[property];
33. break;
34. }
35. }
36. } else {
37. // If dtoptions is declare, extend the current options with it.
38. angular.extend(options, $scope.dtOptions);
39. }
40. // Just some basic validation.
41. if (typeof options['sAjaxSource'] === 'undefined') {
42. throw "Ajax Source not defined! Use sajaxsource='/api/v1/blabla'";
43. }
44. // for Angular http inceptors
45. if (typeof options['fnServerData'] === 'undefined') {
46. options['fnServerData'] = function (sSource, aoData, resultCb) {
47. $http.get(sSource, aoData).then(function (result) {
48. resultCb(result.data);
49. });
50. };
51. }
52. // Get the column options, put it in a aocolumn object.
53. // Obviously, mdata is the only one required.
54. // I personally just needed those 3, if you need other more feel free to add it.
55. // mData also accepts a function; I'm sure there's a more elegant way but for now
56. // it detects if it's a function, and if it is, do it.
57. options.aoColumns = [];
58. // Get the thead rows.
59. $elem.find('thead th').each(function() {
60. var colattr = angular.element(this).data();
61. //console.log(colattr);
62. //console.log('demodeo');
63. // Detects if it's a function. Must exist in scope.
64. if (colattr.mdata.indexOf("()") > 1) {
65. // Simple one-liner that removes the ending ()
66. var fn = $scope[colattr.mdata.substring(0, colattr.mdata.length - 2)];
67. // Throw an error if it's not a function.
68. if (typeof fn === 'function') {
69. options.aoColumns.push({
70. mData: fn,
71. sClass: colattr.sclass,
72. bVisible: colattr.bvisible,
73. mRender: colattr.mrender
74. });
75. } else {
76. throw "mData function does not exist in $scope.";
77. }
78. } else {
79. //console.log('<1?');
80. options.aoColumns.push({
81. mData: colattr.mdata,
82. sClass: colattr.sclass,
83. bVisible: colattr.bvisible,
84. mRender: colattr.mrender
85. });
86. }
87. });
88. // Load the datatable!
89. $elem.dataTable(options);
90. //console.log(options);
91. }
92. }
93. });
94. </span>