angularJs中datatable实现代码


Posted in Javascript onJune 03, 2017

本文介绍了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); 
 
 } 
 } 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript事件模型代码
Jul 01 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue2.0模拟锚点的实例
Mar 14 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 #Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 #Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 #Javascript
利用vueJs实现图片轮播实例代码
Jun 03 #Javascript
angular中使用Socket.io实例代码
Jun 03 #Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
深入理解Node中的buffer模块
Jun 03 #Javascript
You might like
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
wxPython中listbox用法实例详解
2015/06/01 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
解决Mac下使用python的坑
2019/08/13 Python
python如何把字符串类型list转换成list
2020/02/18 Python
解决python运行效率不高的问题
2020/07/20 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
教师自我鉴定范文
2013/11/10 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
优秀毕业生求职信
2014/06/05 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
大学教师个人总结
2015/02/10 职场文书
红色经典电影观后感
2015/06/18 职场文书
国庆节主题班会
2015/08/15 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS