当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angularJs中datatable实现代码

angularJs中datatable实现代码

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

html引用derective:

复制代码 代码如下:

<table datatable dtoptions="dtoptionsexample2" class="table table-striped m-b-none"></table>

controller设置：

$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 '<a class="emplyeeinfolink" href="javascript:;" rel="external nofollow" >阿司法所</a>'; 
} 
}, 
{ "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:

angular.module('datatablesdirectives', []).directive('datatable', function ($http) { 
 return { 
 // i restricted it to a only. i initially wanted to do something like 
 // <datatable> <thead> ... </thead> </datatable> 
 // but thead elements are only valid inside table, and <datatable> is not a table. 
 // so.. no choice to use <table datatable> 
 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); 
 
 } 
 } 
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网