angularJs中datatable实现代码

2024-02-20 21:02:04 365

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

}
}
});

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

angularJs中datatable实现代码

热门推荐

随机推荐