微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularJs中datatable实现代码

本文介绍了angularJs中datatable实现,有需要的小伙伴可以参考下

html引用derective:

代码如下:

controller设置:

rush:js;"> $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:

rush:js;"> angular.module('datatablesDirectives',[]).directive('datatable',function ($http) { return { // I restricted it to A only. I initially wanted to do something like // ... // But thead elements are only valid inside table,and is not a table. // So.. no choice to use 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,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 = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e[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 $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e."; 

} 

} else {
//console.log('<1?');
options.aoColumns.push({
mData: colattr.mdata,mRender: colattr.mrender
});

}
});

// Load the datatable!
$elem.dataTable(options);
//console.log(options);

}
}
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文地址:https://www.jb51.cc/js/38857.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐