angularJs中datatable实现代码
本文介绍了angularJs中datatable实现,有需要的小伙伴可以参考下
html引用derective:
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'阿司法所'; } }, {"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{ //IrestrictedittoAonly.Iinitiallywantedtodosomethinglike //... //Buttheadelementsareonlyvalidinsidetable,andisnotatable. //So..nochoicetouse restrict:'A', link:function($scope,$elem,attrs){ varoptions={}; //Startwiththedefaults.Changethistoyourdefaults. options={} //IfdtOptionsisdefinedinthecontroller,extendourdefaultoption. if(typeof$scope.dtOptions!=='undefined'){ angular.extend(options,$scope.dtOptions); } //Ifdtoptionsisnotdeclared,checktheotheroptions if(attrs['dtoptions']===undefined){ //Gettheattributes,putitinanoptions //Weneedtodoaswitch/casebecauseattributesdoesnotretaincase //anddatatablesoptionsarecasesensitive.Damn.It'sokay!Weneedtodetect //thecallbacksanywayandcallitasfunctions,soitworksout! //IputwhatIneeded,mostofmysettingsarenotdynamicsexceptthose2. for(propertyinattrs){ switch(property){ //Thisistheajaxsource case'sajaxsource': options['sAjaxSource']=attrs[property]; break; //Thisistheajaxdataprop.Forexample,yourresultmightbe //{code:200,data:[..]}->inthecase,sAjaxDataPropisdata case'sajaxdataprop': options['sAjaxDataProp']=attrs[property]; break; } } }else{ //Ifdtoptionsisdeclare,extendthecurrentoptionswithit. angular.extend(options,$scope.dtOptions); } //Justsomebasicvalidation. if(typeofoptions['sAjaxSource']==='undefined'){ throw"AjaxSourcenotdefined!Usesajaxsource='/api/v1/blabla'"; } //forAngularhttpinceptors if(typeofoptions['fnServerData']==='undefined'){ options['fnServerData']=function(sSource,aoData,resultCb){ $http.get(sSource,aoData).then(function(result){ resultCb(result.data); }); }; } //Getthecolumnoptions,putitinaaocolumnobject. //Obviously,mdataistheonlyonerequired. //Ipersonallyjustneededthose3,ifyouneedothermorefeelfreetoaddit. //mDataalsoacceptsafunction;I'msurethere'samoreelegantwaybutfornow //itdetectsifit'safunction,andifitis,doit. options.aoColumns=[]; //Getthetheadrows. $elem.find('theadth').each(function(){ varcolattr=angular.element(this).data(); //console.log(colattr); //console.log('demodeo'); //Detectsifit'safunction.Mustexistinscope. if(colattr.mdata.indexOf("()")>1){ //Simpleone-linerthatremovestheending() varfn=$scope[colattr.mdata.substring(0,colattr.mdata.length-2)]; //Throwanerrorifit'snotafunction. if(typeoffn==='function'){ options.aoColumns.push({ mData:fn, sClass:colattr.sclass, bVisible:colattr.bvisible, mRender:colattr.mrender }); }else{ throw"mDatafunctiondoesnotexistin$scope."; } }else{ //console.log('<1?'); options.aoColumns.push({ mData:colattr.mdata, sClass:colattr.sclass, bVisible:colattr.bvisible, mRender:colattr.mrender }); } }); //Loadthedatatable! $elem.dataTable(options); //console.log(options); } } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。