本文介绍了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); } } });
以上就是angularjs中关于datatable的实现代码分享的详细内容。