首页
编程开发 > JAVA > 文章内容

JavaScript知识点：angularJs中datatable实现代码

2017-6-29编辑:daibenhua

　　本文介绍了angularJs中datatable实现，有需要的小伙伴可以参考下

　　html引用derective:

　　复制代码 代码如下:

　　< table datatable dtOptions="dtOptionsExample2" class="table table-striped m-b-none">

　　controller设置：

　　?

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

　　angular.datatable.js:

　　?

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

 

JavaScript知识点：JavaScript基础之this详解

热点推荐

触屏版电脑版网站地图