angularJs中datatable实现

html引用derective:

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

[javascript]  view plain  copy

 print ?

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>  

angular.datatable.js:

[javascript]  view plain  copy

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