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 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
js的touch事件的实际引用
Oct 13 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
PHP实现微信退款的方法示例
2019/03/26 PHP
js实现图片轮换效果代码
2013/04/16 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
Python用模块pytz来转换时区
2016/08/19 Python
python中partial()基础用法说明
2018/12/30 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
对python中各个response的使用说明
2020/03/28 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
介绍一下write命令
2014/08/10 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
大学生如何写自荐信
2014/01/08 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
艺术节主持词
2014/04/02 职场文书
2014年会策划方案
2014/05/11 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫